Publish your React app to FREE Firebase Hosting
Overview of WWYL (what will you learn)
1. Create a template React app with CRA, configure the site to connect to firebase
2. Configure Firebase, to work with our React App, finally deploy the app to Firebase
Why Firebase Hosting?
Because is super fast, super secure, super easy, and super FREE ….. enough said….
more info here https://firebase.google.com/pricing
(you won't pay unless you have super loads of traffic)
Pre-Requirements:
- Knowledge of React.js — https://reactjs.org/docs/create-a-new-react-app.html
- Free Firebase Account — create it here https://firebase.google.com/
Set up React APP
If you already have a React app you don’t need to do this, otherwise here are the steps
- Create React app with
npx create-react-app my-app - Go into your app
cd my-app - Then run the app
npm start
Connect your React APP to your Firebase project
- Install Firebase tools on your system with:
npm i -g firebase-tools - Log in to Firebase with:
firebase login(this should open a browser page to authenticate with your google account) - Initialize Firebase on your React project with:
firebase init
When you use firebase init you’ll get greeted with this firebase screen
4. Use your down arrow to hosting select Hosting by using the spacebar
5. Then press enter
6. Select Create a new Project
7. Use a UNIQUE Project name (Unique to the world)
- Example project name:
my-app-js-21
8. Your Firebase Project is ready!!!
9. What do you want to use as your public directory? don’t leave Public, change it to build (since this is where our react project will create the build on)
10. Configure as a Single-page app — YES
11. Set up automatic builds and deploys with Github? — NO
12. Run the Production Build for React with yarn build (this will create a build folder where all your React documents will be compiled)
Further information about the Production Build here: https://create-react-app.dev/docs/production-build/
13. Finally we PUSH or DEPLOY to Firebase with firebase deploy
This will give you a public link that you should share with the world, for example, mine is: https://my-app-js-21.web.app
We are done Yeahhhhh !
Hope this helped…… Let me know if you have questions about this……
