npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flapp

v1.0.26

Published

Multi app supporter for Flutter projects.

Downloads

8

Readme

Flapp

Flapp helps you manage multiple apps in one project.

TODO

  • Anndroid app store key 및 자동 sign

    • 참고: https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
  • 앱 변경시,

    • default.app-icon.png 와 같이 하고 flutter icon 자동 생성. 또는 pubspec 을 바탕으로 자동 생성.
  • 앱 이름 변경

    • Android 와 iOS 모두 지원

Limitations of support for monorepo in Flutter

  • Flutter has Flavors that handles variety jobs to support different settings and package name(Bundle ID). But it lacks on supporting mutiple apps in one project.
  • What it needs the followings below to support monorepo
    • To segregate pubspec.yaml per each app
    • To segregate assets per each app
    • To segregate dart scripts per each app
    • To change Application Id (Bundle ID)
    • To change other resources like Firebase service file
    • And much more.

Installation

  • Install flapp globally.

    • npm i -g flapp
  • Create flapp.json under Flutter porject folder.

Usages

Run flaap with the following commands.

  • --path with Flutter project folder. If you omit --path option, it will consider that current working directory is Flutter project folder.

    • Example)
      • flapp --path ~/tmp/fluttercms --app korea_flutter_community
  • --app with app name to change to the app.

    • Example)
      • flapp --app default
      • flapp --app my_app
  • --doctor to check if everything is okay.

    • --doctor option will check the package name in pubspec.yaml and its folders.

설정

  • 설정 파일의 이름은 flaap.json 이며, Flutter 프로젝트 폴더에 존재해야 한다.

예제)

{
    "apps": {
        "default": {
            "AppId": "com.sonub.fluttercms",
        },
        "korea_flutter_community": {
            "AppId": "com.sonub.koreafluttercommunity"
        }
    },
    "MainActivity": "android/app/src/main/kotlin/com/example/fluttercms/MainActivity.kt"
}
  • apps 속성 아래에 APP_NAME 이 들어가는데, 주의해야 할 것은

    • pubspec.yaml 에 들어 있는 name 과 APP_NAME 그리고 lib/apps/APP_NAME 이 세개가 동일한 값이어야 한다.

    • APP_NAME 에는 하이픈을 사용 할 수 없으며, 대신 언더바(_)를 사용 할 수 있다.

    • The default app that is created by flutter CLI command should be reside under lib/apps/default/res folder.

  • "apps" 하위에 각 앱 설정을 한다.

    • "AppId" 는 Android 의 package name 이며, iOS 의 Bundle ID 이다.
  • MainActivity 에는 MainActivity.kt 경로를 적어준다.

    • 예) "android/app/src/main/kotlin/com/example/fluttercms/MainActivity.kt"
  • 파일 Hard link

    • 각 앱 폴더에 있는 파일을 플러터 프로젝트의 특정 위치로 hard link 를 한다.
    • 예를 들면, Info.plist 나 google-service.json 이나 GoogleServie-Info.plsit 와 같은 파일을 어느 위치로 link 를 하라고 지시하는 것이다.
      • 이렇게 하면, 보다 편리하게 앱 소스 관리를 할 수 있다.
      • 예를 들어, 카카오톡 로그인을 경우, 앱 마다 client id 가 모두 틀리다. 그래서 각 앱 마다 설정이 달라야 한다.
      • 이 때, 설정 파일을 lib/settings.dart 로 해 놓고 사용하는데,
        • 각 앱에서 lib/apps/APP_NAME/APP_NAME.settings.dartlib/settings.dart 로 링크해서 쓰도록 하면 된다.
    • 예) flapp.config.json
{
    "apps": {
        "default": {
            "AppId": "com.sonub.fluttercms",
            "files": {
                "lib/apps/default/res/default.pubspec.yaml": "pubspec.yaml",
                "lib/apps/default/res/default.Info.plist": "ios/Runner/Info.plist",
                "lib/apps/default/res/default.GoogleService-Info.plist": "ios/Runner/GoogleService-Info.plist",
                "lib/apps/default/res/default.google-services.json": "android/app/google-service.json",
                "lib/apps/default/res/default.key.properties": "android/key.properties",
                "lib/apps/default/default.settings.dart": "lib/settings.dart"
            },
            "folders": {
                "lib/apps/default/res/splash-images": "android/app/src/main/res"
            }
        },
        "korea_flutter_community": {
            "AppId": "com.sonub.koreafluttercommunity",
            "files": {
                "lib/apps/korea_flutter_community/res/korea_flutter_community.pubspec.yaml": "pubspec.yaml",
                "lib/apps/korea_flutter_community/res/korea_flutter_community.Info.plist": "ios/Runner/Info.plist",
                "lib/apps/korea_flutter_community/res/korea_flutter_community.GoogleService-Info.plist": "ios/Runner/GoogleService-Info.plist",
                "lib/apps/korea_flutter_community/res/korea_flutter_community.google-services.json": "android/app/google-service.json",
                "lib/apps/korea_flutter_community/res/korea_flutter_community.key.properties": "android/key.properties",
                "lib/apps/korea_flutter_community/korea_flutter_community.settings.dart": "lib/settings.dart"
            },
            "folders": {
                "lib/apps/korea_flutter_community/res/splash-images": "android/app/src/main/res"
            }
        }
    },
    "MainActivity": "android/app/src/main/kotlin/com/example/fluttercms/MainActivity.kt"
}
  와 같이 복사 할 위치를 적어준다.
  • 이렇게 하면 앱 별로 쓰는 파일과 안쓰는 파일을 구분 할 수 있다.

  • 폴더 복사

    • 폴더는 hard link 가 안되고 복사만 된다.
    • "folders": { ... } 로 복사 할 소스 폴더와 저장할 대상 폴더를 지정하면 된다.
    • 예를 들면, 각 앱 마다 Android Splash Images 를 다르게 작성해야하는데, 앱 폴더 별로 저장해 놓고, 복사를 할 수 있다.
  • 참고: main.dart-t 옵션으로 지정하므로, hard link 를 할 필요가 없다.

  • 참고: key.properties 는 Github 등에 업로드가 안되도록 해야 한다.

하는 일

공통

  • 각 앱의 pubspec.yaml 를 프로젝트 루트 폴더의 pubspec.yaml 로 hard link

Android 에서 하는 일

  • main, debug, profile 의 AppMainifest.xml 에서 package 를 패치
  • build.gradle 에서 ApplicationId 를 패치
  • MainActivity.kt 에서 package 패치
  • google-service.josn 을 hard link
  • flaap.json 에 다라 원하는 파일을 hard link 하고 폴더를 복사한다.
    • key.properties hard link
    • google-service.json link
    • Splash screen images 복사 등의 일을 한다.

iOS 에서 하는 일

  • flaap.json 에 다라 원하는 파일을 hard link 하고 폴더를 복사한다.
    • key.properties hard link
    • google-service.json link
    • Splash screen images 복사 등의 일을 한다.

수동으로 해야 하는 것

  • Xcode 에서 Bundle ID 지정
  • Xcode 에서 기타 설정.
    • Info.plist 관리 등
    • 예) URL Scheme 등. 참고로 URL Scheme 은 Info.plist 에 저장되는데,
  • Building & Publishing

개발자 노트

실행

  • 앱 변경 테스트
nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts --path ~/tmp/fluttercms --app korea_flutter_community
  • Doctor 테스트 실행
$ nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts --path ~/apps/study/fluttercms/ --doctor

배포

  • npm run build
  • npm publish

알려진 문제점

  • 앱을 변경하면, VSCode 에서 파일을 자동으로 로드를하지 못한다.
    • 이 때, 해당 파일을 닫고 다시 열면, 파일이 바뀌어져 있는데,
    • 앱을 변경하고, VSCode 를 종료하고 다시 오픈한다.
      • Xcode 도 마찬가지로, 종료하고 다시 오픈한다.