From 204eb3c9701243f12058dcbbc70dd41cd711ae63 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 14 Apr 2023 11:07:18 -0400 Subject: [PATCH 1/5] docs(react): update firebase instructions for deploying pwa Co-authored-by: Brett Peary --- docs/react/pwa.md | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index ef57dc05667..c8a997645dd 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -24,16 +24,13 @@ npm install -D vite-plugin-pwa Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`: ```javascript -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' -import { VitePWA } from 'vite-plugin-pwa' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import { VitePWA } from 'vite-plugin-pwa'; export default defineConfig({ - plugins: [ - react(), - VitePWA({ registerType: 'autoUpdate' }) - ], -}) + plugins: [react(), VitePWA({ registerType: 'autoUpdate' })], +}); ``` This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. @@ -104,20 +101,34 @@ npm install -g firebase-tools With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: -**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites." +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. **"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. **"What do you want to use as your public directory?"** Enter "build". :::note -Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app: +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: ::: **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". **"File build/index.html already exists. Overwrite?"** Enter "No". +**Set up automatic builds and deploys with github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main brainch name. + A `firebase.json` config file is generated, configuring the app for deployment. The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like: From c6e69d88dce187e05990f0c475c701c6dee25a96 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 14 Apr 2023 11:13:14 -0400 Subject: [PATCH 2/5] chore: port changes to angular and vue --- docs/angular/pwa.md | 24 +++++++++++++++++------- docs/react/pwa.md | 2 +- docs/vue/pwa.md | 20 +++++++++++++++++--- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 8b90caf5d89..ad095648343 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -76,25 +76,35 @@ Next, in a Terminal, install the Firebase CLI: npm install -g firebase-tools ``` -:::note -If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. -::: - With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: -**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites." +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. **"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. **"What do you want to use as your public directory?"** Enter "www". :::note -Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app: +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: ::: **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". -**"File www/index.html already exists. Overwrite?"** Enter "No". +**"File build/index.html already exists. Overwrite?"** Enter "No". + +**Set up automatic builds and deploys with github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. A `firebase.json` config file is generated, configuring the app for deployment. diff --git a/docs/react/pwa.md b/docs/react/pwa.md index c8a997645dd..04e0638ea89 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -127,7 +127,7 @@ Answering this next question will ensure that routing, hard reload, and deep lin **Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". -**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main brainch name. +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. A `firebase.json` config file is generated, configuring the app for deployment. diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index b322831ceac..8d5cc63a81b 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -169,19 +169,33 @@ npm install -g firebase-tools With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: -**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites." +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. **"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. **"What do you want to use as your public directory?"** Enter "dist". :::note -Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app: +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: ::: **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". -**"File dist/index.html already exists. Overwrite?"** Enter "No". +**"File build/index.html already exists. Overwrite?"** Enter "No". + +**Set up automatic builds and deploys with github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. A `firebase.json` config file is generated, configuring the app for deployment. From 2c123a3b6c82438486848e19adb258e2e034f1f3 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 14 Apr 2023 11:15:52 -0400 Subject: [PATCH 3/5] chore: add note about firebase login --- docs/angular/pwa.md | 4 ++++ docs/react/pwa.md | 4 ++++ docs/vue/pwa.md | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index ad095648343..68044bb423c 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -76,6 +76,10 @@ Next, in a Terminal, install the Firebase CLI: npm install -g firebase-tools ``` +:::note +If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. +::: + With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: **"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". diff --git a/docs/react/pwa.md b/docs/react/pwa.md index 04e0638ea89..bf9e01c6117 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -99,6 +99,10 @@ Next, in a Terminal, install the Firebase CLI: npm install -g firebase-tools ``` +:::note +If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. +::: + With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: **"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index 8d5cc63a81b..063bdc2167e 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -167,6 +167,10 @@ Next, in a Terminal, install the Firebase CLI: npm install -g firebase-tools ``` +:::note +If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. +::: + With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: **"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". From 83db14c78543d1046cbd6d51c6168425abd8341f Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Sun, 16 Apr 2023 22:21:00 -0400 Subject: [PATCH 4/5] fix: github casing --- docs/react/pwa.md | 2 +- docs/vue/pwa.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/pwa.md b/docs/react/pwa.md index bf9e01c6117..e81a216d127 100644 --- a/docs/react/pwa.md +++ b/docs/react/pwa.md @@ -121,7 +121,7 @@ Answering this next question will ensure that routing, hard reload, and deep lin **"File build/index.html already exists. Overwrite?"** Enter "No". -**Set up automatic builds and deploys with github?** Enter "Yes". +**Set up automatic builds and deploys with Github?** Enter "Yes". **For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index 063bdc2167e..7e85935bd9f 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -189,7 +189,7 @@ Answering this next question will ensure that routing, hard reload, and deep lin **"File build/index.html already exists. Overwrite?"** Enter "No". -**Set up automatic builds and deploys with github?** Enter "Yes". +**Set up automatic builds and deploys with Github?** Enter "Yes". **For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. From cc55df6575ec1ec6aa404cd5cbe2f0255c22da54 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Mon, 17 Apr 2023 16:58:30 -0400 Subject: [PATCH 5/5] fix: angular pwa github casing --- docs/angular/pwa.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 68044bb423c..183cbb76295 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -98,7 +98,7 @@ Answering this next question will ensure that routing, hard reload, and deep lin **"File build/index.html already exists. Overwrite?"** Enter "No". -**Set up automatic builds and deploys with github?** Enter "Yes". +**Set up automatic builds and deploys with Github?** Enter "Yes". **For which GitHub repository would you like to set up a Github Workflow?** Enter your project name.