How to Upload Your React Application to Surge in Minutes

Photo by Luke Peters on Unsplash

This is a beginner level tutorial on how to deploy a static site to Surge. This article assumes the reader has a basic knowledge of npm and familiarity with your computer terminal.

As developers, we are always looking for tools to use to improve efficiency. Surge is a great tool to help developers deploy and host static websites and applications onto the web for free. Below, we will cover why surge is a great option, and how to deploy your site in minutes with a step-by-step guide.

What is Surge?

Surge is a service that allows a developer to deploy and host their static website and applications. The best part is you can enjoy the service without having to invest. Or, if you would like, you can use the premium service(starting at $30 a month), which offers unlimited projects, access to a custom SSL end entity certificate, securing websites with https. That said, the benefits of the free version are still fantastic, offering you a custom domain name and client-side routing back to a 200.html file when a page doesn’t exist.

Step 1: Installing Surge

1. First, Let’s make sure you have the most up to date version of node.js to prevent any issues.
2. Now open your terminal and go to your project.
3. Next, install surge using the npm command below!

*To make sure you have the latest version installed go to your command line and type ‘node -v’*

Yay! It’s installed! Now…Let’s deploy your site!

Step 2: Deploy Your Site!

1. First, we need to find the file path of the project directory we want to use for the deployment. As an example, I’m going to implement a project located at General_assembly/sei/Cologne/SmellGood/client

2. Once you are in the file, you want to be in for the deployment, enter the command below.

npm run build

The command above is the build command that you need to get started.

Next…

Cd into the build directory.

cd build/

Once in the build directory…

We need to rename the index.html file to be 200.html.

*It will work just fine if you decide not to rename index.html to 200.html; this is primarily for client-side routing(When React Router is being used). What will happen is if the page doesn’t exist it will send the user to a new page where you will see the 404 error*

mv index.html  200.html

After you renamed the file or you decided to skip this step, we need to run surge.

surge

After you run the program, you should see a file path ending with /build/

Press Enter.

When you press enter, it will ask you to create a domain. Here you can change it to whatever you would like…

You should now see a screen that shows you that your domain was successfully created with the URL.

You can now copy and paste the URL to your browser, and you should see it render on your screen.

NOW, ALL THE COMMANDS TOGETHER

npm run build
cd build/
mv index.html  200.html
surge

Congratulations, you have successfully deployed your website to the web using surge.sh! How did you like the deployment process? Which web publishing service do you prefer? Share your thoughts below!

Let’s connect on Twitter; You can find out more about me and my journey in Software Engineering here!

Let’s continue the conversation on LinkedIn! If you have any questions, feedback, or interested in networking, shoot me a message here!