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
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.
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
Time: 1 min
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
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.
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!
This is the simple and awesome setup we use for reactaudit.com 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.
