diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 8b90caf5d89..183cbb76295 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -82,19 +82,33 @@ If it's the first time you use firebase-tools, login to your Google account with 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 ef57dc05667..e81a216d127 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. @@ -102,22 +99,40 @@ 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 "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 branch 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: diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index b322831ceac..7e85935bd9f 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -167,21 +167,39 @@ 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 "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.