Hosting on firebase is pretty easy, once you get your configuration set up properly. I feel like a lot of guides leave some things out however. Here's how I was able to get my react app setup with firebase. It'll help if you have a firebase account setup before you start.
Installation / Setup (i assume you have a react app already.)
npm install -g firebase-tools
after you've installed, you need to login.
firebase login
Initialization (in your project directory)
firebase init
Make sure to choose hosting below.
? 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
❯◯ Hosting: Configure and deploy Firebase Hosting sites
◯ Storage: Deploy Cloud Storage security rules
Give it your project name. This is the name you will see on your firebase dashboard.
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:
-> give-your-firebase-project-a-name
i Using project give-your-firebase-project-a-name
Make sure you answer these questions correctly as shown below. It's important to know, if you don't have a build directory in your react project folder, you need to build your project. To get that build folder, open up a terminal in your project directory and type npm run-script build -- this should generate a build folder. If not, check your package.json for a "build" script. if its not there you can always just type npm react-scripts build
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? No
Configuration
You're almost done. A lot of tutorials will now jump straight to the firebase deploy command. This didn't work for me though. If it worked for you, then you don't really need to read on. If you're having trouble, here is how I fixed it.
Go to your firebase.json file and make sure it looks similar to this.
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"rewrites": {
"source": "**",
"destination": "/index.html"
}
}
Once this is setup like the above, try running the following in the project directory:
firebase deploy
Your app should be good to go now. The console will spit out a link for you to check your app.
Top comments (0)