Build and automatically deploy a React site

Building, deploying and hosting a website has never been easier especially with the extensive range of free tools and services available. As a developer, building websites in familiar technologies like React is preferable to building it in Wordpress or plain HTML. I’ll show you how you can get from 0 lines of code to production in 5 mins. As a bonus, your repo will be set up to deploy automatically, on every commit to master!

Zero configuration setup with create-react-app

No-one wants to spend their first few hours agonising over the basic setup of a React application. How does a developer navigate the sea of setup configuration that includes Webpack/Babel/NPM/Lint etc.. required to start building a React app. The answer is the superb create-react-app, maintained by the creators of React/Redux, which simplifies setup to a few seconds. Not only will the basics be set up, it’ll also come with the latest React development tooling.

npm install -g create-react-appcreate-react-app react-site
cd react-site/
npm start

💥 That’s it, your React application should be running locally on http://localhost:3000 powered by an excellent React tech and tool stack.

Host your site on Surge

For free static site hosting, I like Surge.sh. Surge offers a nice free plan which includes using a custom domain.

Use the surge cli to create and deploy your site. You’ll need to run a `npm run build` to produce the production-ready static site.

npm install --global surge
npm run build # Creates production build in build/
surge build # Publishes

💥 Your React site should now be live!

Continuously deploy changes

Instead of manually deploying my site each time, I prefer setting up a automated workflow where changes pushed are live in under a minute.

Since I usually keep my code in Bitbucket (free unlimited private repos!), I can use Bitbucket Pipelines (disclosure: I work on it) to build and deploy my site. Bitbucket comes with 50 free pipeline minutes/month, enough for ~50+ deployments per month.

Pipelines can be found in your Bitbucket repository’s navigation menu.

To configure it to deploy to Surge, you will need to add 2 environment variables in your Pipeline settings:

  • SURGE_LOGIN (your Surge email)
  • SURGE_TOKEN (obtained by running `surge token`)

Here’s the bitbucket-pipelines.yml configuration I use. The global surge dependency can be replaced by adding surge as a dev dependency and using an npm script.

image: node:6.9.4

pipelines:
branches:
master:
- step:
script:
- npm install -g surge
- npm install
- npm run build
- surge build <your-project>.surge.sh

💥 Now every new commit on master will be automatically deployed to Surge.

Bonus tip: Configure HipChat or Slack notifications to alert your team whenever your site has been successfully deployed.

Go build your sites!

Product engineer @ TransferWise. Previously, product and engineer @ Atlassian. Devtools and snowboarding enthusiast.

Product engineer @ TransferWise. Previously, product and engineer @ Atlassian. Devtools and snowboarding enthusiast.