Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use CircleCI for continuous deployment of Firebase hosting, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Whether you are using front-end applications such as Angular,React,Vue. Production deployment is the most boring part. Because we need to perform a lot of manual steps to perform npm install,ng test,build and so on. This article explains how to automate all of these steps using the CircleCI pipeline. Just push your changes to the GitHub repository and CircleCi will notice everything.

Create an Angular Application to use the latest nodeJS global

Install @ angular / cli.

$ng new angular-circleci-firebase

Select the following options

? Do you want to add Angular routes? Yes

Is it? Which style sheet format do you want to use?

CSS

❯ SCSS [http://sass-lang.com]

SASS [http://sass-lang.com]

LESS [http://lesscss.org]

Stylus [http://stylus-lang.com]]

Video tutorial

GitHub and Bitbucket, currently working with GIT, are providing private repositories for free accounts. Use the following steps to create a new repository.

Create a new repository

Go back to the code

$cd your-project-folder

$git init

$git add.

$git commit-m "first commit"

$git remote add origin https://github.com/username/your-repository-name.git

$git push-u origin master

Submit your project file

GitHub vulnerability Notification

Git will display notifications of package.json vulnerabilities.

NPM Audit Fix

This updates the project package file with the latest version.

$npm audit fix

Modified:package-lock.json

Modified:package.json

Submit review changes

$git add.

$git commit-m "Audit Fix Change"

$git push

Deploy to Firebase

First, you need to create a project in Google Firebase, go to the Google Firebase console, and set up the project.

Install Firebase

Tools install Firebase tools globally.

$sudo npm install-g firebase-tools

Configure Firebase

Now log in to Firebase using your Google account. This command redirects to the Google account login page.

$firebase login

? Allow Firebase to collect anonymous CLI usage information? No, please

Visit this URL on any device to log in:

Https:

/ / accounts.google.com/o/oauth3/auth?

Client_id = xxxxxxxxxxxxxx waiting for authentication... ✔ successful! Log in as youremail@gmail.com

Initialize Firebase

Go to the angular2 project folder and execute the following command.

$firebase init

Click the down arrow to select your firebase project. If you do not just select the default project.

Select host

Set up the distribution folder

The default release directory is "public" and replace it with "dist"

? What do you want to use as your public directory? Disperse

? Configured as a single-page application (rewriting all URL to / index.html)? Right

✔ writes DIST / index.html.

I wrote the configuration information to firebase.json.

The project information I wrote. Firebaserc.

✔ fire bunker initialization complete!

This process creates a .firebaserc initialization file.

Modify the project code. You can find it in the Firbase console.

Production Build

Angular.json

Go to the project and change the outputPath value to dist.

"outputPath": "dist / your-project-name"

Change to

"outputPath": "dist"

Use this command to build the final build, which generates a dist folder containing all the required packages.

$ng build-prod

Firebase Push

$firebase deployment

Let's configure CircleCI

Circle login

Create a free account using a GitHub or BitBucket account.

Add a project

CircleCI will import all GitHub / Bitbucket projects. Click the set Project button.

Select Enviroment

Choose Linux as the operating system using the Node language.

Pipe configuration description

You must use the config.yml pipe phase file to create a .circleci folder.

Create config.yml

Create a folder

CircleCI config.yml of the Angular project

You can add multiple phases using-run. Here npm install and npm run build are important commands, ignoring the unit test for this demonstration.

Version: 2

Work:

Build:

Dock workers:

-Image: 'circleci / node:8'

Working_directory: ~ / repo

Steps:

-check out

-restore_cache:

Key:

-'v1-dependencies-{{checksum "package.json"}}'

-V1Mutual dependencies-

-run: 'npm install'

-save_cache:

Path:

-node_modules

Key: 'v1-dependencies-{{checksum "package.json"}}'

-run:

Name: 'construction project'

Command: 'npm run build'

-run:

Name: 'deploy to Firebase hosting'

Command: O'Neill. / node_modules / .bin / firebase deploy-- token = $FIREBASE_TOKEN

The pipe that failed when you clicked the start build button failed. Because there are few steps to access firebase.

Generate Firebase tokens

Go to the project folder and execute firbase login:ci. This will take you to the browser for Google authentication and redirect back to using the Firebase token.

CircleCI environment variable

Select the project and click the Settings (Gear) icon in the upper-right corner. You will find options for Enviroment Variable.

Add Firbase for environment variabl

Create the name of the variable FIREBASE_TOKEN, which is used in the config.yml command for fire bunker deployment. This is required for external access to Firbase.

Add the Firebase tool as Dev Dependency

Go to the project folder and execute the following command to update package.json. CircleCI will use this firebase tool library for deployment.

$npm install-save-dev firebase-tools

Commit your changes

$git add.

$git commit-m "CircleCi yml file"

$git push

Build successfully

Once a GitHub push occurs, the pipeline automatically begins the step of deploying the changes on the Firebase hosting. Now you will find a successful build.

Build for Master Branch

If you are using multiple branches. Try to ignore the development branch.

Config.yml

Include branches and use only master branches to build the deployment pipeline.

Version: 2

Work:

Build:

Branch:

Only:

-Master

Ignore:

-Development

Dock workers:

-Image: 'circleci / node:8'

Working_directory: ~ / repo

Steps:

-check out

-restore_cache:

Key:

-'v1-dependencies-{{checksum "package.json"}}'

-V1Mutual dependencies-

-run: 'npm install'

-save_cache:

Path:

-node_modules

Key: 'v1-dependencies-{{checksum "package.json"}}'

-run:

Name: 'construction project'

Command: 'npm run build'

-run:

Name: 'deploy to Firebase hosting'

Command: O'Neill. / node_modules / .bin / firebase deploy-- token = $FIREBASE_TOKEN'

Firbase Custom Domain

Start Hosting

Go to the Firbase console and navigate to Develop-> Hosting

Connection domain

Add a domain and continue.

Modify A record

Use these A record values in the domain DNS settings.

These are all the contents of the article "how to use CircleCI to deploy Firebase hosting continuously from a perspective". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.