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

  1. Create React app with npx create-react-app my-app
  2. Go into your app cd my-app
  3. Then run the app npm start

Connect your React APP to your Firebase project

  1. Install Firebase tools on your system with: npm i -g firebase-tools
  2. Log in to Firebase with: firebase login (this should open a browser page to authenticate with your google account)
  3. 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……

--

--

JonathanSanchez.Dev
JonathanSanchez.Dev

Written by JonathanSanchez.Dev

Developer by day, rockin' drummer by night. Loves dogs🐶 and collaborating with fellow engineers. Passionate, creative, and always up for a coding adventure! 🚀

No responses yet