You can create a website simply using, HTML, CSS, and a little bit of JS. But here we are going to learn to create a simple React website and making it live in just 5 minutes using Firebase Hosting.
I assume that you have a basic knowledge of React and Firebase. Otherwise please refer to the official website of React and documentation for Firebase hosting.
Create a website using React
Rect.js is one of the best libraries to create single-page web apps. Other than pages, React handles with Components. To make multiple pages in a React app, we actually use routes. That is, a route represents a page.
To learn more about React, you can read the article, What Are The Benefits Of Using React.Js For Web Development.
Here, we are going to create a simple single-page website using React. Note that, I am not interested in making a complete website with responsive pages and links, because this article is to make aware of hosting a React website with Firebase.
1. Create a React application
First, we need to create a react application using the NPX tool. Don’t worry about NPX, because it’s a tool coming with NPM(Node Package Manager) 5.2+ onwards.
So, after a successful installation of Node.js, create a React application using NPX.
Note:- If you are using Windows 10, Install Node.Js, And NPM On Windows 10 guide will help you to install Node.js.
npx create-react-app simple-website
This command will create a react application with the project name simple-website.
Now enter the project directory and start the app.
cd simple-website npm start
It will open up the React application we have created in our browser window with the address https://localhost:3000. The port may vary if 3000 is busy.
If you need further assistance in the installation of React on your system, use the below links.
Install React on Windows, Ubuntu, and macOS
2. Add Bootstrap CDN
We are using a bootstrap template to set up our view and it requires a Bootstrap CSS file. We can add bootstrap in our react application multiple ways and here I am using the Bootstrap CDN.
So, open index.html file in public directory and add the bootstrap CDN inside <head></head> section.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
So that the complete index.html file looks like the below.
3. Design home page
In real cases, React websites are divided into components and all the components are imported to App.js
But here, I am not interested to make this website that much complicated. So I am going to code my home page design in the App.js file itself.
So the complete app we have created looks like below.
4. Create production build
So, I created a simple React website. But you have to note that the running version of this website is in development mode. We need to build production-ready version for hosting.
Run the below command to make a production ready version.
npm run build
This will create directory named build in project root. We can deploy this folder to Firebase.
Host created website in Firebase
You might hear about Firebase. It is Google’s mobile and web application development platform that helps you build, improve, and grow your app.
We can use all its services for free until a limit. Here, we are going to host our website in Firebase for free.
1. Setup a project in Firebase
First, setup a project in Firebase using the reference below.
https://console.firebase.google.com/
Click on Add project and fill the form with your project name. Press Create project button.
If everything goes well, it shows up a success message as shown below.
Now go to Hosting from the side menu and press Get started button. This will show a modal like below.
It shows the instructions to install firebase-tools on our system. It can be easily done with NPM. We have already installed Node.js and NPM in our system. Now install firebase-tools with the command below.
npm install -g firebase-tools
Now, click the Continue button. This will show a number of commands to execute. These are explained in upcoming steps.
2. Login to your Google account
Log in to the Google account using the command below.
firebase login
This will ask you for permission as below.
Allow Firebase to collect anonymous CLI usage and error reporting information?
Enter yes.
Allow permission to access your Google account.
After that, a Success message will be shown on our system.
3. Initialize Firebase in our project
Initialize Firebase in our project using the below command.
firebase init
Now it asks some questions.
- Which Firebase CLI features do you want to set up for this folder? Press Space
to select features, then Enter to confirm your choices.
Select Hosting from the options.
2. Select a default Firebase project for this directory
Select the project we created earlier on Firebase(Sample Website)
4. Deploy the project
Deploying the project to Firebase can be done by a single command. But as a default, firebase only deploys public folder in our project. In our case, we need to deploy build directory, so edit the file firebase.json.
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
Now deploy your project using the below command.
firebase deploy
If everything goes well, it shows up Deploy complete! message and a hosting URL. In my case, the hosting URL is as given below.
Hosting URL: https://sample-website-133.firebaseapp.com
Now we can connect a domain name(If we have one).
If you don’t have a domain name, buy it from any domain name registrar. The below URL will help you to buy a domain name from Godaddy.
How To Buy A Domain Name From Godaddy
Using the below URL, we can connect our website to a domain name like (www.examplewebsite.com).
https://console.firebase.google.com/project/sample-website-133/hosting/main
It gives us a TXT record and A record. Just add this TXT record in our DNS to verify the domain and add the A record to direct it to our app.
Summary
So, in this article, we created a simple website using React.js and deployed it to the Firebase hosting. It can be accessed with the below URL
https://sample-website-133.firebaseapp.com
I also added a reference link to buy a domain name from Godaddy and connect our website to it.
