Open In App

How to deploy React app to Surge ?

Improve
Improve
Like Article
Like
Save
Share
Report

React stands out as a widely embraced library for crafting User Interfaces. When it comes to deploying your static React app effortlessly, the surge package comes in handy, enabling you to publish web apps to a CDN seamlessly with just one command.

Prerequisites:

What is Surge?

While free hosting tools such as GitHub and Heroku exist, setting up the deployment for frontend-only projects can be a bit complex. In such cases, Surge proves to be a valuable solution. This widely-used npm library simplifies the deployment of static web pages with a single command. After creating a project build, execute the surge command in the terminal within the build folder, and you even have the option to select a custom project name.

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app deploy

Step 2: After creating your project folder i.e. styled, move to the same folder:

cd deploy

Step 3: To install  surge use the following command:

npm install --global surge

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}

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:



Last Updated : 17 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads