Deploy React apps in Ubuntu using nginx and Capistrano

Gustavo Gonzalez
May 24, 2018 · 4 min read

Our default development stack includes Ruby on Rails for back-end and React for front-end.

For many years we kept using Capistrano to deploy our rails applications, since Capistrano allows to deploy different technologies, we decided to use it for our React apps.

What we should do to deploy our React apps?

The first requirement is ruby, Capistrano is a ruby gem so…
In this example we will need nvm since we have many node versions in our test server and, we will use yarn to manage the dependences.

With the following sentences we will install Capistrano and the other gems:

We can use Bundler to install our gems, to do it, we need to create a Gemfile to tell Bundler what should be installed, the following is the content of my Gemfile

To install gems using bundler we should run bundle install.

The next step is to configure our React app to use Capistrano, so in our app folder we should run cap install.

It should generate some folders and files in our React app, and those files should be modified to configure Capistrano based on our requirements.

So, the next step is to modify the files.

Capfile

This file is used to let Capistrano know what libraries we are going to use in our deploy, in our example we are going to need `git`, `nvm`, and `yarn`. This is the content of the file:

deploy.rb

This file has the global configuration for Capistrano, includes things like the folder where we will put our code in the server, the repo url, what files/folders we want to override (to prevent them to be uploaded to the repo). This is an example:

deploy/stage.rb (staging, production, etc)

If we need to override any global configuration, it is the right place to do it, it is excellent to set the server info or the branch to be deployed.

Once we have set up our React App to use Capistrano, we need to execute the deploy. The following sentence does the magic bundle exec cap staging deploy.

It is all about deploying the React app with Capistrano, this is an execution output example:

Capistrano’s folders

Capistrano uses a particular folder structure in the server, using as root the folder set in deploy_to these are the files and folders that Capistrano generates:

Setting Up nginx

To be able to serve a React app using nginx we need to add a pretty simple config, this is an example:

Wrapping up

Is pretty easy to deploy a React app using Capistrano, we only need to follow some steps, and in matter of minutes the app will be available to be used.

If you like this story clap as many times as you want, and to see similar stories about technology, check our publications and leave us a comment if you have any question.

If you need a team that can help you to implement your ideas in React JS or Native, feel free to ping us using our website and filling the contact form.

Spanish version

Gustavo
Mail: gustavo@alturasoluciones.com
Twitter: @Aguardientico
LinkedIn: www.linkedin.com/in/gustavoagonzalez
Blog in spanish: http://aguardientech.blogspot.com

AlturaSoluciones

IT consulting. #Agile and #Lean remote software development team specialized in #web, #mobile, #reactjs and #rubyonrails from #Ecuador.

Gustavo Gonzalez

Written by

25+ years in software development. Loves to learn new technologies and share his knowledge with others.

AlturaSoluciones

IT consulting. #Agile and #Lean remote software development team specialized in #web, #mobile, #reactjs and #rubyonrails from #Ecuador.

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