From 9d55b9936dc704350cf8cbf15b9861fd8a495570 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Tue, 5 Mar 2024 21:21:05 +0530 Subject: [PATCH 1/4] Document NODE_VERSION --- web/docs/README.md | 2 +- web/docs/dependencies.md | 10 ++++++++++ web/docs/new.md | 4 ++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/web/docs/README.md b/web/docs/README.md index a42498fba0..e826bdfcc5 100644 --- a/web/docs/README.md +++ b/web/docs/README.md @@ -3,6 +3,6 @@ If you just want to run ente locally or develop on it, you can do yarn - yarn dev:photos + yarn dev The docs in this directory are for more advanced or infrequently needed details. diff --git a/web/docs/dependencies.md b/web/docs/dependencies.md index aad328c9af..ddfc681362 100644 --- a/web/docs/dependencies.md +++ b/web/docs/dependencies.md @@ -14,6 +14,16 @@ They also need some support packages: * "@typescript-eslint/parser" - Tells ESLint how to read TypeScript syntax * "@typescript-eslint/eslint-plugin" - Provides TypeScript rules and presets +## Node + +Node is used under the hood to build the web apps. We currently use **20.11.1**. + +* On production, this is ensured by setting the NODE_VERSION environment + variable in Cloudflare Pages settings. + +* On your machine, you can install the the latest from the v20 series. e.g., on + macOS, you can `brew install node@20`. + ## Utils ### Crypto diff --git a/web/docs/new.md b/web/docs/new.md index fcdaad4aec..a393066fe3 100644 --- a/web/docs/new.md +++ b/web/docs/new.md @@ -9,7 +9,7 @@ development, here is a recommended workflow: 3. Enable the VS Code setting to format on save. -4. Install node on your machine `brew install node`. Our package manager, `yarn` - comes with it. +4. Install node on your machine `brew install node@20`. Our package manager, + `yarn` comes with it. That's it. Enjoy coding! From f199ce0e8305c17e2075958d21ed4a26eee65637 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 6 Mar 2024 11:44:09 +0530 Subject: [PATCH 2/4] Update deployment instructions --- web/docs/dependencies.md | 10 ------ web/docs/deploy.md | 66 +++++++++++++++++++--------------------- 2 files changed, 32 insertions(+), 44 deletions(-) diff --git a/web/docs/dependencies.md b/web/docs/dependencies.md index ddfc681362..aad328c9af 100644 --- a/web/docs/dependencies.md +++ b/web/docs/dependencies.md @@ -14,16 +14,6 @@ They also need some support packages: * "@typescript-eslint/parser" - Tells ESLint how to read TypeScript syntax * "@typescript-eslint/eslint-plugin" - Provides TypeScript rules and presets -## Node - -Node is used under the hood to build the web apps. We currently use **20.11.1**. - -* On production, this is ensured by setting the NODE_VERSION environment - variable in Cloudflare Pages settings. - -* On your machine, you can install the the latest from the v20 series. e.g., on - macOS, you can `brew install node@20`. - ## Utils ### Crypto diff --git a/web/docs/deploy.md b/web/docs/deploy.md index 2919b1785a..55d132da01 100644 --- a/web/docs/deploy.md +++ b/web/docs/deploy.md @@ -1,44 +1,39 @@ # Deploying the web apps -The various web apps (Ente Photos, Ente Auth) are deployed on Cloudflare Pages. -They also use Cloudflare Workers for some tasks. - -This repository deploys multiple different apps (the Photos app, the Auth app). -Some of them get deployed to multiple different endpoints (e.g. the main branch -of photos app gets deployed to testing.ente.io, the while the photos-release -branch is the production deployment). +## tl;dr; -The apps are under the app directory: +```sh +yarn deploy:photos +``` -- photos - The Ente Photos app -- auth - The Ente Auth app -- cast - The cast app, which can be thought of as an independent subset of - Photos app functionality -- ... and more +## Details -For deploying, we've added the GitHub integration provided by Cloudflare Pages -app to this repository. This integration watches for pushes to all branches. In -all cases, it runs the same script, `scripts/deploy.sh`. +The various web apps (Ente Photos, Ente Auth) are deployed on Cloudflare Pages. -Internally it uses the `CF_PAGES_BRANCH` environment variable to decide what -exactly to build ([CF +The deployment is done using the GitHub app provided by Cloudflare Pages. The +Cloudflare integration watches for pushes to all branches named "deploy/*". In +all cases, it runs the same script, `scripts/deploy.sh`, using the +`CF_PAGES_BRANCH` environment variable to decide what exactly to build ([CF docs](https://developers.cloudflare.com/pages/how-to/build-commands-branches/)). -Then, for some special branches, we have configured CNAME aliases (Cloudflare -calls them Custom Domains) to give a stable URL to some of these deployments -Here is a potentially out of date list of CNAMEs and the corresponding branch; -see the Cloudflare dashboard for the latest: +For each of these branches, we have configured CNAME aliases (Cloudflare calls +them Custom Domains) to give a stable URL to the deployments. -- _testing.ente.io_: `main` -- _web.ente.io_: `photos-release` -- _auth.ente.io_: `auth-release` -- _accounts.ente.io_: `accounts-release` -- _cast.ente.io_: `cast-release` +- `deploy/photos` → _web.ente.io_ +- `deploy/auth` → _auth.ente.io_ +- `deploy/accounts` → _accounts.ente.io_ +- `deploy/cast` → _cast.ente.io_ Thus to trigger a, say, production deployment of the photos app, we can open and -merge a PR into the `photos-release` branch. Cloudflare will then build and +merge a PR into the `deploy/photos` branch. Cloudflare will then build and deploy the code to _web.ente.io_. +The command `yarn deploy:photos` just does that - it'll open a new PR to fast +forward the current main onto `deploy/photos`. There are similar `yarn deploy:*` +commands for the other apps. + +## Other subdomains + Apart from this, there are also some subdomains: - `albums.ente.io` is a CNAME alias to the production deployment @@ -49,14 +44,17 @@ Apart from this, there are also some subdomains: - `payments.ente.io` and `family.ente.io` are currently in a separate repositories (Enhancement: bring them in here). -In Cloudflare Pages setting the following environment variables are defined: +## NODE_VERSION + +In Cloudflare Pages setting the `NODE_VERSION` environment variables is defined. -- `NODE_VERSION`: Determines which version of Node is used when we do `yarn - build:foo`. Currently this is set to `20.11.1`. The major version here should - match that of `@types/node` in our dev dependencies. +This determines which version of Node is used when we do `yarn build:foo`. +Currently this is set to `20.11.1`. The major version here should match that of +`@types/node` in our dev dependencies. -- `SENTRY_AUTH_TOKEN`: An encrypted environment variable that is used by the - Sentry Webpack Plugin to upload sourcemaps during the build. +It is a good idea to also use the same major version of node on your machine. +For example, for macOS you can install the the latest from the v20 series using +`brew install node@20`. ## Adding a new app From 92b5411cb2c021f1228bc6e6e92a1bc97b8605b6 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 6 Mar 2024 11:44:30 +0530 Subject: [PATCH 3/4] Update deployment script --- web/scripts/deploy.sh | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/web/scripts/deploy.sh b/web/scripts/deploy.sh index eb3e26b2df..cbce135b91 100755 --- a/web/scripts/deploy.sh +++ b/web/scripts/deploy.sh @@ -1,8 +1,8 @@ #!/bin/sh # This script is run by the Cloudflare Pages integration when deploying the apps -# in this repository. The app to build and the environment variables to use is -# decided based on the value of the CF_PAGES_BRANCH environment variable. +# in this repository. The app to build is decided based on the value of the +# CF_PAGES_BRANCH environment variable. # # The Cloudflare Pages build configuration is set to use `out/` as the build # output directory, so once we're done building we copy the app specific output @@ -12,29 +12,40 @@ # # To test this script locally, run # -# CF_PAGES_BRANCH=foo-bar ./scripts/deploy.sh +# CF_PAGES_BRANCH=deploy/foo ./scripts/deploy.sh # set -o errexit set -o xtrace +if test "$(basename $(pwd))" != "web" +then + echo "ERROR: This script should be run from the web directory" + exit 1 +fi + rm -rf out case "$CF_PAGES_BRANCH" in - accounts-*) + deploy/accounts) yarn build:accounts cp -R apps/accounts/out . ;; - auth-*) + deploy/auth) yarn build:auth cp -R apps/auth/out . ;; - cast-*) + deploy/cast) yarn build:cast cp -R apps/cast/out . ;; - *) + deploy/photos) yarn build:photos cp -R apps/photos/out . ;; + *) + echo "ERROR: We don't know how to build and deploy a branch named $CF_PAGES_BRANCH." + echo " Maybe you forgot to add a new case in web/scripts/deploy.sh" + exit 1 + ;; esac From 7057b53d2c56dd0a7af586293e927eaf37d978df Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Wed, 6 Mar 2024 11:58:41 +0530 Subject: [PATCH 4/4] Add deployment shortcuts --- web/package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web/package.json b/web/package.json index 4e1e216473..4a5633e39d 100644 --- a/web/package.json +++ b/web/package.json @@ -12,6 +12,10 @@ "build:auth": "yarn workspace auth next build", "build:cast": "yarn workspace cast next build", "build:photos": "yarn workspace photos next build", + "deploy:accounts": "open 'https://github.com/ente-io/ente/pull/new/deploy/accounts..main'", + "deploy:auth": "open 'https://github.com/ente-io/ente/pull/new/deploy/auth..main'", + "deploy:cast": "open 'https://github.com/ente-io/ente/pull/new/deploy/cast..main'", + "deploy:photos": "open 'https://github.com/ente-io/ente/pull/new/deploy/photos..main'", "dev": "yarn dev:photos", "dev:accounts": "yarn workspace accounts next dev", "dev:albums": "yarn workspace photos next dev -p 3002",