Surge for front end React developers

How to Surge for front end react projects

Posted by aquasar on Nov 21st, 2018

What is Surge?

Surge is a great way to host front end only ( static ) websites. It is very easy to get started with surge, and you can deploy your sample front end site in about 5 minutes.

Create production build in react

First thing, make sure to create a `production` build of your react project. In the terminal of your project folder:

            npm run build

Installing Surge Globally

In the terminal inside your project folder:

            npm install --global surge

Create production build in react

We use the surge command `-p build` to make sure we are only uploading what is inside the build directory. I.e only the files we want to upload to the server from our production build.

            surge -p build

If it is your first time, it will prompt you to enter an email and password.

After you have entered your email and password press enter. All the files will then get uploaded and a test domain for you site will be provided.

Your site is now `live`

Listing all my surge sites

To List all your sites, in the terminal type:

            surge list

Remove project from Surge

To stop showing your project on Surge, we can simply write

            surge teardown <your surge domain>

For more info about surge and how to create a custom domain visit

Storing to git repo and github

For version control and keeping track of changes we can use git and github. In your text editor, inside your main/root folder, create a new file called .gitignore and write the following inside it:


The `forward slash` tells git that this is a folder we want to ignore and not track changes made to it. Next we go to the terminal and write:

                git init

This initializes a git repo inside the main/root folder of your project.

                git add .

This adds all the files in project to be commited, except the ones in .gitignore

                git commit -m "first commit"

Commits changes

Now in github create a new repo. Copy and paste the code for `pushing an exisiting repository from the command line`. I.e.
git remote add origin<github username>/<github repo name>.git
git push -u origin master

Your files for the project should now be on github