Image for post
Image for post

Build and automatically deploy a React site

Joshua Tjhin
Jun 18, 2017 · 3 min read

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

Time: 1 min

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.

💥 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

Time: 1 min

For free static site hosting, I like 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.

💥 Your React site should now be live!

Continuously deploy changes

Time: 3 mins

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.

💥 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!

This is the simple and awesome setup we use for where changes are live within seconds of pushing. Try it out with your next React project whether it’s starting your own blog, website or just getting better at React.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store