How To Deploy React App Using Surge

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.

Installation of Node.js on Windows
Installation of Node.js on Linux

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.