feat: production deployment setup & basic versioning strategy (#46)

### Summary This PR introduces production setup, that will allow us to deploy the showcase to production. What's included: - mini-app release CI workflow that creates and uploads mini-apps as GitHub releases upon pushing specific git tags - `catalog-server` Vercel setup and build script that maps releases to host app - `catalog-server` deployment via manually triggered GitHub workflow - basic versioning strategy with `changesets` and compatibility-matrix that acts as a lockfile with versions - docs documenting the release process
callstack · Jun 15, 2023 · 4a131f8 · 4a131f8
1 parent 71dc507
commit 4a131f8
Show file tree

Hide file tree

Showing 42 changed files with 1,935 additions and 102 deletions.
diff --git a/.changeset/README.md b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/.github/workflows/create-release.yml b/.github/workflows/create-release.yml
@@ -0,0 +1,53 @@
+name: Build and Deploy
+
+on:
+  push:
+    tags:
+      - auth-android@*.*.*
+      - auth-ios@*.*.*
+      - booking-android@*.*.*
+      - booking-ios@*.*.*
+      - dashboard-android@*.*.*
+      - dashboard-ios@*.*.*
+      - shopping-android@*.*.*
+      - shopping-ios@*.*.*
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment: release
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Create code-signing.pem
+        env:
+          CODE_SIGNING_KEY: ${{ secrets.CODE_SIGNING_KEY }}
+        run: echo "$CODE_SIGNING_KEY" > code-signing.pem
+
+      - name: Build
+        run: yarn node scripts/build-miniapp.js ${{ github.ref_name }}
+
+      - name: Delete code-signing.pem
+        run: rm code-signing.pem
+
+      - name: Release
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: "build/**/*.bundle,build/**/*.map"
+          artifactErrorsFailBuild: true
+          skipIfReleaseExists: true
+          name: ${{ github.ref_name }}
+          tag: ${{ github.ref }}
diff --git a/.github/workflows/deploy-catalog-server.yml b/.github/workflows/deploy-catalog-server.yml
@@ -0,0 +1,23 @@
+name: Deploy catalog-server
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment: release
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+
+      - name: Deploy to Vercel
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+        run: vercel --token $VERCEL_TOKEN --prod
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,9 @@ node_modules
 
 build/
 
+.vscode/
+
 # Code Signing
 code-signing.pem
-code-signing.pem.pub
+code-signing.pem.pub
+
diff --git a/RELEASING.md b/RELEASING.md
@@ -0,0 +1,65 @@
+# Super-App-Showcase Release Process
+
+This document explains the detailed process of releasing the Super-App-Showcase. The release process is divided into three major sections:
+
+1. Releasing Mini-Apps
+2. Deploying Catalog-Server
+3. Deploying Apps to the Stores
+
+Please follow the below guidelines for each step of the process.
+
+---
+
+## 1. Releasing Mini-Apps
+
+Mini-apps are released by creating and bumping its version via changeset. Please follow these steps to successfully release mini-apps:
+
+1. **Run Changeset Version Command**: Execute the following command to create a changeset:
+
+```bash
+yarn changeset version
+```
+
+This assumes that the repository is correctly set up with node_modules installed and there are already some changesets ready to be used for the next version.
+
+2. **Update Compatibility Matrix**: Run the script to update the compatibility matrix. This matrix keeps information on compatibility between mini-apps and the host/shell app. Here's the command to execute:
+
+```bash
+yarn node scripts/update-compatibility-matrix.js
+```
+
+This script goes through all the packages in the monorepo and determines their compatibility based on semantic versioning rules. It's vital to have an accurate compatibility matrix because it dictates which versions of federated dependencies are compatible with which versions of the app. It is assumed that the project uses semantic versioning for package versions.
+
+3. **Create a Pull Request (PR)**: Create a PR that includes updated CHANGELOG.md from changesets, bumped version packages, and updated compatibility matrix. The PR should have "Release" in the title. Example: `Release: auth v0.0.1`.
+
+4. **Release Mini-Apps**: After the PR is merged, release the mini-apps by creating and pushing git tags of the specific format: `<mini-app>-<platform>@<version>`. You can use the following command to create a tag:
+
+```bash
+git tag [email protected]
+
+git push --tags
+```
+
+In this format, `<mini-app>` represents the package name of the mini-apps in the repository (auth, booking, dashboard, shopping), `<platform>` represents either ios or android, and `<version>` represents the current version of that mini-app in its `package.json`.
+
+5. **Create and Upload a Release**: When the tag is pushed, the GitHub workflow is launched for each tag pushed. This workflow creates a build of that mini-app and uploads it to GitHub Releases.
+
+---
+
+## 2. Deploying Catalog-Server
+
+The catalog-server is manually deployed once the mini-apps have been released. It gathers URLs to the releases and deploys itself to production, exposing the mini-apps to the host app in production.
+
+The catalog-server can be deployed via a manual GitHub workflow. This workflow triggers deployment on Vercel where the catalog-server is hosted. The Vercel deployment includes running a build script that reads the 'compatibility-matrix.json' file and generates URLs for iOS and Android application bundles. It organizes the generated URLs into a JSON object, separated by platform and application version, and writes this JSON object to a file named '[appName].prod.json' in the 'data' directory.
+
+For the catalog-server deployment to be successful, ensure that the mini-apps are properly released on GitHub and that the compatibility matrix isn't corrupted.
+
+---
+
+## 3. Deploying Apps to the Stores
+
+Please note, as of now the process for releasing the host app to the stores is not yet implemented. This section will be updated as soon as the implementation is done.
+
+**TODO**: Implement and document the process of deploying apps to the stores.
+
+---
diff --git a/compatibility-matrix.json b/compatibility-matrix.json
@@ -0,0 +1,120 @@
+{
+  "booking": {
+    "sources": [
+      {
+        "name": "auth",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      }
+    ],
+    "versions": {
+      "0.0.1": {
+        "auth": "0.0.1"
+      }
+    }
+  },
+  "dashboard": {
+    "sources": [
+      {
+        "name": "auth",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      }
+    ],
+    "versions": {
+      "0.0.1": {
+        "auth": "0.0.1"
+      }
+    }
+  },
+  "host": {
+    "sources": [
+      {
+        "name": "auth",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "booking",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "dashboard",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "shopping",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "news",
+        "type": "external",
+        "url": "https://github.com/callstack/news-mini-app-showcase"
+      }
+    ],
+    "versions": {
+      "0.0.1": {
+        "auth": "0.0.1",
+        "booking": "0.0.1",
+        "dashboard": "0.0.1",
+        "shopping": "0.0.1",
+        "news": "0.0.1"
+      }
+    }
+  },
+  "shell": {
+    "sources": [
+      {
+        "name": "auth",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "booking",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "dashboard",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "shopping",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      },
+      {
+        "name": "news",
+        "type": "external",
+        "url": "https://github.com/callstack/news-mini-app-showcase"
+      }
+    ],
+    "versions": {
+      "0.0.1": {
+        "auth": "0.0.1",
+        "booking": "0.0.1",
+        "dashboard": "0.0.1",
+        "shopping": "0.0.1",
+        "news": "0.0.1"
+      }
+    }
+  },
+  "shopping": {
+    "sources": [
+      {
+        "name": "auth",
+        "type": "internal",
+        "url": "https://github.com/callstack/super-app-showcase"
+      }
+    ],
+    "versions": {
+      "0.0.1": {
+        "auth": "0.0.1"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -33,5 +33,8 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "concurrently": "^7.6.0"
+  },
+  "dependencies": {
+    "@changesets/cli": "^2.26.1"
   }
 }
diff --git a/packages/auth/.gitignore b/packages/auth/.gitignore
@@ -28,3 +28,6 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+# Build dir
+build/
diff --git a/packages/auth/index.js b/packages/auth/index.js
@@ -0,0 +1,5 @@
+export * from './src/contexts/AuthContext';
+export * from './src/providers/AuthProvider';
+export * from './src/screens/AccountScreen';
+export * from './src/screens/SignInScreen';
+export * from './src/services/AuthService';
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -9,6 +9,7 @@
     "start": "react-native webpack-start --port 9003",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "bundle": "yarn bundle:ios && yarn bundle:android",
     "bundle:ios": "react-native webpack-bundle --platform ios --entry-file index.js --dev false",
     "bundle:android": "react-native webpack-bundle --platform android --entry-file index.js --dev false"
   },
@@ -41,6 +42,7 @@
     "typescript": "4.8.4",
     "webpack": "^5.74.0"
   },
+  "federatedModule": "auth",
   "jest": {
     "preset": "react-native",
     "moduleFileExtensions": [

diff --git a/packages/auth/webpack.config.mjs b/packages/auth/webpack.config.mjs
@@ -198,6 +198,7 @@ export default env => {
             options: {
               platform,
               devServerEnabled: Boolean(devServer),
+              inline: true,
               /**
                * Defines which assets are scalable - which assets can have
                * scale suffixes: `@1x`, `@2x` and so on.
@@ -271,7 +272,7 @@ export default env => {
         },
       }),
       new Repack.plugins.CodeSigningPlugin({
-        privateKeyPath: path.join('..', '..', './code-signing.pem'),
+        privateKeyPath: path.join('..', '..', 'code-signing.pem'),
         outputPath: path.join('build', 'outputs', platform, 'remotes'),
       }),
     ],

diff --git a/packages/booking/package.json b/packages/booking/package.json
@@ -10,6 +10,7 @@
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "typecheck": "tsc",
+    "bundle": "yarn bundle:ios && yarn bundle:android",
     "bundle:ios": "react-native webpack-bundle --platform ios --entry-file index.js --dev false",
     "bundle:android": "react-native webpack-bundle --platform android --entry-file index.js --dev false"
   },
@@ -49,6 +50,14 @@
     "typescript": "4.8.4",
     "webpack": "^5.74.0"
   },
+  "federatedModule": "booking",
+  "federatedDependencies": [
+    {
+      "name": "auth",
+      "type": "internal",
+      "url": "https://github.com/callstack/super-app-showcase"
+    }
+  ],
   "jest": {
     "preset": "react-native",
     "moduleFileExtensions": [

diff --git a/packages/booking/webpack.config.mjs b/packages/booking/webpack.config.mjs
@@ -199,6 +199,7 @@ export default env => {
             options: {
               platform,
               devServerEnabled: Boolean(devServer),
+              inline: true,
               /**
                * Defines which assets are scalable - which assets can have
                * scale suffixes: `@1x`, `@2x` and so on.
@@ -254,7 +255,7 @@ export default env => {
         shared: deps,
       }),
       new Repack.plugins.CodeSigningPlugin({
-        privateKeyPath: path.join('..', '..', './code-signing.pem'),
+        privateKeyPath: path.join('..', '..', 'code-signing.pem'),
         outputPath: path.join('build', 'outputs', platform, 'remotes'),
       }),
     ],