How To Deploy Single Page Applications Bootsraped by Create React App to surge.sh

Have you heard about surge.sh? If someone ask me that question 2 days ago, my answer, for sure, is "Nope".  I just found this surge.sh yesterday when I tried to publish a simple todo list app built with React JS, React Router and Redux to GitHub project pages. Unfortunately, the application router didn't work smoothly under  https://{username}.github.io/{repo-name}. Instead of changing my working code, I decided to find other free static hosting providers. I found surge.sh somewhere on the create-react-app guide. I install it globally using npm, then I typed surge command under the project directory, and boom the app is online on a surge.sh subdomain. It is fast and easy to deploy our static file to surge.sh. So, In this React JS tutorial, I will show how effective deploying our React JS app to surge.sh.

Installing the surge.sh cli

We will install it locally inside our project dev dependecies using npm: npm i surge --save-dev or yarn: yarn add surge --dev. I assume that you have bootstraped React JS application using create-react-app.

Add deploying script in package.json

Let's modify our package.json scripts by adding this "deploy": "npm run build && surge build -d learnreactsurge.surge.sh",. Don't forget to change the domain to whatever you want as long as it has not been taken by others.

"scripts": {
    "deploy": "npm run build && surge build -d learnreactsurge.surge.sh",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Deploy The App

Now, we are ready to deploy our react js applications, just run yarn deploy or npm run deploy, the app will be uploaded to surge.sh cdn and accessible from the subdomain specified using -d option on deploy script.

Demo

you can see live demo here: http://learnreactsurge.surge.sh/