Deploy React apps in Ubuntu using nginx and Capistrano
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.
Gustavo
Mail: gustavo@alturasoluciones.com
Twitter: @Aguardientico
LinkedIn: www.linkedin.com/in/gustavoagonzalez
Blog in spanish: http://aguardientech.blogspot.com
