Read the related post on How to deploy a React App to Cloudflare host for free
Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.
Firebase offers free host services for React SPA deployment. Below is how to do this with trivial steps!
Deploy React Apps on Firebase
- Demo Site: https://xyz-firebase-react.web.app/
- Github repo here
Create react app
npx create-react-app project-name
cd project-name
yarn
yarn start
Install Firebase tools CLI
npm install -g firebase-tools
Login Firebase using CLI
firebase login
You will be redirected to the Firebase login page. Input your account there.
Setup Firebase project from CLI
Note: you can also create a project using the Firebase console, but using CLI is more convenient.
- Run the below command
cd project-name
firebase init
You need cd into the folder where React App is created. Follow the instructions as shown below:
- Confirm YES.
- Create a new Firebase project, e.g. "xyz-firebase-react"
- Input a project ID, e.g. "xyz-firebase-react"
- Choose a directory where the contents will be deployed to Firebase, type "build", since when you package the react app using "yarn build" command, the "build" folder will be the default.
- Confirm "YES". This is important since we are not deploying the static html!
- Confirm NO.
- Confirm NO.
Build react app locally
cd project-name
yarn build
This will package the react app, and the output is in the build sub-folder now.
Deploy react app to Firebase
firebase deploy
Open a browser window, and type the url: https://xyz-firebase-react.web.app/
Now, your app is deployed to Firebase! Happy coding, happy deploying!
Top comments (0)