Intro Doing the same thing is very bored. On this topic, the boring part is deploying our Web Application to Hosting. The steps that we do are : Firebase Test your react app, yarn test Push to git Build your react app, yarn build Do deployment to firebase hosting, firebase deploy The above steps is very bored, in this article I try to share my experience to summarize the four jobs above into one. So all we need to do is push changes to the git repository, and CircleCI will do everything. Requirements Before starting further, you must have the five requirements below : React App. Firebase Project, go to . here Git repository. My repository for this tutorial, here Firebase Command Line Tools, go to . here account, go to . CircleCI here Let’s start! 1. Configure Firebase Create a React project, in this tutorial I will using create-react-app $ create-react-app learn-cd-react-firebase$ cd learn-cd-react-firebase$ yarn install$ yarn build We need configure our project to connect with Firebase, do firebase login $ firebase login ? Allow Firebase to collect anonymous CLI usage and error reporting information? No Visit this URL on any device to log in: xxxxxx https://accounts.google.com/o/oauth2/auth?client_id=563584335869-x Waiting for authentication... ✔ Success! Logged in as arryanggaputra@gmail.com Do , this will setup a new Firebase project in the current directory. This command will create a configuration file in your current directory. firebase init firebase.json Use spaces to make choice, choose Hosting You're about to initialize a Firebase project in this directory: /Users/arryanggaalievpratamaputra/sites/learn-cd-react-firebase ? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.◯ Database: Deploy Firebase Realtime Database Rules◯ Firestore: Deploy rules and create indexes for Firestore◯ Functions: Configure and deploy Cloud Functions❯◉ ◯ Storage: Deploy Cloud Storage security rules Hosting: Configure and deploy Firebase Hosting sites Choose your Firebase Project First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? Select a default Firebase project for this directory:[don't setup a default project]mws-surabaya (mws-surabaya)❯ [create a new project] learn-cd-react-firebase (learn-cd-react-firebase) Configure public directory, type , project will generate your build into folder. , type build create-react-app build Configure as a single-page app Yes === Hosting Setup Your public directory is the folder (relative to your project directory) thatwill contain Hosting assets to be uploaded with firebase deploy. If youhave a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? ? Configure as a single-page app (rewrite all urls to /index.html)? ? File build/index.html already exists. Overwrite? i Skipping write of build/index.html build Yes No i Writing configuration info to firebase.json...i Writing project information to .firebaserc... ✔ Firebase initialization complete! 2. Deploy to Firebase Manually To make sure whether that our Firebase Hosting can be used, we’ll try to do Deployment manually. We do builds with commands yarn build yarn run v1.10.1$ react-scripts buildCreating an optimized production build...Compiled successfully. File sizes after gzip: 34.71 KB build/static/js/1.fa92c112.chunk.js763 B build/static/js/runtime~main.229c360f.js713 B build/static/js/main.b50be446.chunk.js511 B build/static/css/main.3a30845b.chunk.css The project was built assuming it is hosted at the server root.You can control this with the homepage field in your package.json.For example, add this to build it for GitHub Pages: "homepage" : " ", https:// learn-cd-react-firebase.firebaseapp.com The build folder is ready to be deployed.You may serve it with a static server: yarn global add serveserve -s build Find out more about deployment here: http://bit.ly/CRA-deploy ✨ Done in 13.14s. After build success, we do deployment to Firebase with commands firebase deploy === Deploying to 'learn-cd-react-firebase'... i deploying hostingi hosting[learn-cd-react-firebase]: beginning deploy...i hosting[learn-cd-react-firebase]: found 15 files in build✔ hosting[learn-cd-react-firebase]: file upload completei hosting[learn-cd-react-firebase]: finalizing version...✔ hosting[learn-cd-react-firebase]: version finalizedi hosting[learn-cd-react-firebase]: releasing new version...✔ hosting[learn-cd-react-firebase]: release complete ✔ Deploy complete! Project Console: Hosting URL: https://console.firebase.google.com/project/learn-cd-react-firebase/overview https://learn-cd-react-firebase.firebaseapp.com It’s work 🔥😎 https://learn-cd-react-firebase.firebaseapp.com 3. Configure CircleCI with Our Project Go to , and circleci.com ADD PROJECT Press Setup Project button Choose as operating system, and as our language. Linux Node Back to our project, and create CircleCI configuration Create a folder named .circleci Add a file (so that the filepath be in ). config.yml .circleci/config.yml Populate the with the contents of the sample config.yml config.yml Copy this sample to our repository version: 2jobs:build:docker:- image: 'circleci/node:8'working_directory: ~/reposteps:- checkout- restore_cache:keys:- 'v1-dependencies-{{ checksum "package.json" }}'- v1-dependencies-- run: 'yarn install'- save_cache:paths:- node_moduleskey: 'v1-dependencies-{{ checksum "package.json" }}'- run: 'yarn test' Push this change up to GitHub, and Start building! You need to press blue button labeled as Start building! If building success, you will see this 4. Deploy to Firebase Hosting from CircleCI This step will allow us to deploy our project automatically to Firebase Hosting. Generate a Firebase CI token. $ firebase login:ci Visit this URL on any device to log in: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd Waiting for authentication... ✔ Success! Use this token to login on a CI server: 1/qV80aq1eE06WJkIkwEmkkoU12iIKq2DYOV2gNiTmg Example: firebase deploy --token "$FIREBASE_TOKEN" Go to project setting Project Setting Go to environtment variables Environtment Variables menu at CricleCI Add variable , fill with the token value that we have got before. FIREBASE_TOKEN Open . Add this line to the bottom of .circleci/config.yml config.yml - run:name: 'Build Project'command: 'yarn build'- run:name: 'Deploy to Firebase Hosting'command: './node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN' Add firebase tools as dev dependency yarn add firebase-tools --dev Push changes to github. Everytime you push change at github, CircleCI will do deployment And success We have now setup a continuous deployment to deploy your project to Firebase Hosting. If you are stuck at any point in the sections above or if I have made a mistake somewhere or missed an essential point, do let me know in the comments. If this was useful, please click the clap 👏 button down below a few times to show your support! ⬇⬇⬇ 🙏🏼 My Other Posts _Read writing from Arryangga Aliev Pratamaputra on Medium. Front End Developer - React Enthusiast. Every day…_medium.com Arryangga Aliev Pratamaputra - Medium
