React is a very popular and widely used library for building User Interfaces. So if you are thinking about deploying your Static React app then we can use the surge package, Publish web apps to a CDN with a single command and no setup required.
Prerequisites: Installed Node.js and npm.
Surge: There are some free tools to host our website available like GitHub and Heroku but the setup is a little complicated when it comes to publishing the front-end only. For such a scenario we can use Surge. It is a popular npm library used to deploy static web pages with just a single command. First, we create a build of our project and then we write surge command on the terminal inside the build folder. We can even choose a custom name for our project.
Below is the step by step implementation:
Step 1: Create a React application using the following command:
npx create-react-app deploy
Note: If you’ve previously installed create-react-app globally via npm, directly use the command below:
React app Creation
Your development environment is ready. Let us now install surge in our Application.
Step 2: After creating your project folder i.e. styled, move to the same folder:
cd deploy
Step 3: Surge can be installed via npm in your React application. Follow the steps given below to install surge in your React application: To install surge use the following command:
npm install --global surge
Project Structure: It will look like the following.
Step 4: Now create a dummy project and put the following code into your App.js file.
App.js
import React from 'react'; function App(){ return ( <div> Hello, World! </div> ) } export default App; |
Step 5: Now you need to make a build folder so that you can deploy your React App. Build basically bundles and minifies our code and this folder consists of compiled React which boils down to simple Html, CSS, and JavaScript.
npm run build
Step 6: Now we can host and deploy our React App. Now you have ‘surge’ globally installed in your system so that you will be able to use it as many times as you want in the future. Execute the following command:
surge
Step 7: It will now ask for your email ID and a password (if you are using it for the first time). Here you need to enter your email id and a new password for your surge account.
If you are already logged in you will see the following:
Step 8: After that, you need to give a location to your static files(i.e build folder). If you opened the terminal in the same folder as instructed, hit enter.
Step 9: Now it will ask you for a domain name with an example domain name. Go ahead and edit the part before ‘.surge.sh’ and if that domain is available, it will be assigned to you. Now you can customize the domain name of the website and it will be hosted on that URL and you can change the part before surge.sh.
Step 10: Now hit enter and you will get the link to your site published over the web.
Output: Now if you open the URL you can see the following output, or you can visit this link to check the hosted React App dapper-food.surge.eh
As we can see the process of hosting a static website on the surge is very easy. We can host our website using just 2 commands on surge.
