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:

Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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:

Image for post
Image for post

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.

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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