It was on Saturday afternoon when I was banging my head for not being able to deploy my project to a server. I'm pretty much new to the React and the Front-end world where I'm learning React from Udemy for the past one month.
After completing half of the course, I decided to make a simple app out of the knowledge I learned. I named it WhoCares? which you can find it on GitHub. I was in a hope to deploy the project to the web so that I can show that to my friends. That's where it all started.
The woe
It was for the first time I used Webpack as the bundler. I usually deploy my Laravel projects on Digital Ocean & I have also used Heroku for some Node projects. So, I thought of deploying this app on any one of these. I surfed over the internet. The result is that I cannot find a single resource that doesn't use node backend to deploy a React App or the steps are too hard for me to follow and correlate with my application. I finally thought of dropping the idea for deployment after spending over 4 hours in it. That's when I got a suggestion from my friend to deploy it to Firebase.
The Deployment
In this section, I would like to write about the steps I followed which took about 20 odd minutes to host my application. Before that, I'll share my webpack config file.
1. Configure
To get started with Firebase Hosting, log in to the Firebase console, navigate to the Hosting panel of your project's dashboard and click Get Started.
Next, we'll install the Firebase CLI (command line tool) and initialize your site.
Install the Firebase CLI
Once you have Node.js and npm installed, you can install the Firebase CLI via npm:
npm install -g firebase-tools
This installs the globally available firebase command. To update to the latest version, simply re-run the same command.
Initializing your site
If you have an existing Firebase project you'd like to deploy, cd to the project's root directory and run:
$ firebase init
The firebase init command creates a firebase.json
configuration file in the root of our project's directory. Our firebase.json
Hosting configuration will look like this:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"/.*",
"/node_modules/**"
]
}
}
- Build
Using webpack, you can bundle all of your project components into a single file by using the following command on your terminal,
$ webpack
This will create a bundle.js
file which can be imported into the index.html
file where both of the files will reside in the public folder.
Project Structure
Root
Public
-bundle.js
-index.html
Src
React Components
- Deploy
To deploy your site, simply run the following command from your project directory:
$ firebase deploy
This will deploy your project to <YOUR-FIREBASE-APP>.firebaseapp.com
.
Top comments (6)
Thanks, I wasn't aware that you could host your app on Firebase. I was just familiar with their realtime database and Firestone. It's now added to my list of options for hosting.
I'm glad that it'll help you. 💓
I have always used netlify.com for hosting react.js projects. Never thought that I can use firebase too.
I never knew there is something called netlify! 😂
I like your GitHub handle!
This is an insanely simple and powerful article.
In a pinch, you can throw HTML/js files up on AWS S3.
Thanks.