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 surge.sh
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:
node_modules/
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 https://github.com/<github username>/<github repo name>.git
git push -u origin master
Your files for the project should now be on github