First time deploying my app

Travis, Heroku and some first time tips!

For the last couple of weeks, I have been developing an application that it is ready to be deployed. Not necessarily finished, but with enough features that could be use by the general public.

After doing a bit of research on how to deploy an app, I found that one of the most common and efficient technologies/programs used are Travis CI for continuous integration and Heroku to host sites.

In this post, you will find the steps to follow to deploy an application with Heroku and Travis CI, and I will also share some things to look out for when doing so.

Continuous integration

It is highly recommended to use continuous integration in your project, specially when working in a collaborative environment. Integrating your work with your teammates’ work frequently will reduce differences between each others code, making it easy to merge it in a shared repository.

Continuous integration also helps with building the application and running the tests automatically, which it is very useful to not let failing test be released into production.

To configure continuous integration with Travis, add a `.travis.yml` file to the root of your directory. This file needs to include the scripts (using bash commands) that Travis will need to build your project, install dependencies and run tests.

An example of how your file could look like:

language: elixir
  elixir:
  - 1.8.0
  node_js:
  - 10.3.0
 
  script:
  - mix test
  - npm --prefix ./assets install
  - npm --prefix ./assets test
  - MIX_ENV=test mix coveralls.travise

You will also need to give Travis access to your repository from the dashboard in `travis-ci.com`.

Once the continuous integration is configured in the `.travis.yml` file, every time you push to GitHub, Travis will run your tests and build your application using the testing environment configuration.

Deployment

Having all our tests passing and the application built in travis, the next step is to deploy our application.

Deployment is the process of building your application, including dependencies, in a platform which hosts your production code in its own environment that can be accessed over the internet, anytime.

Heroku is a platform that allows you to deploy your code, and it is specially good for learning purposes as it is free when the page doesn’t have too much traffic (visits on your website).

To create a Heroku application, Heroku uses buildpacks to “interpret” the language your code is written in. The buildpacks are open source and everybody can contribute on.

In this example, I’m using the elixir buildpack to create the application.

In the command line, navigate to the root of your repository and run the following command:

heroku create --buildpack hashnuke/elixir

In the case that you use other languages or frameworks you can add specific buildpacks. For example, my application is is written using the Phoenix framework, so I will also need to run the following script:

heroku buildpacks:add https://github.com/gjaldon/heroku-buildpack-phoenix-static.git

After creating the Heroku application, it is recommended to add a Procfile.

The Procfile allows us to configure the scripts that Heroku will run to start our application, and it also defines the Dyno that Heroku will use for our process.

Phoenix buildpack provides one by default, but it can be overwritten to have more control over what is it running.

An example of a Procfile could be:

web: MIX_ENV=prod mix phx.server

The final step to complete our configuration will be to prepare our application to run with the Heroku config.

We will need to update the port in which our application is running in production to port 443 and change the host to the name of our application created in Heroku.

In my application, It will be something along these lines:

url: [scheme: "https", host: "wellies-weather-app", port: 443],
force_ssl: [rewrite_on: [:x_forwarded_proto]],

Note: Heroku applications are created with random names, but they can be modified from the Heroku dashboard, if you navigate to Settings > Name

It could be convenient to automate the deployment after your CI has been successful, by adding the following script in the `travis.yml` file:

deploy:
 provider: heroku

Things to keep in mind

Retrospectively, the deployment and CI set up hasn’t been too difficult to configure, although I have run into a couple of problems that I’m going to address in this section.

Where your dependencies are installed (global and project dependencies and its versions)

The first problem that I encountered when deploying was that in my application I was using the the dependencies versions that I had globally installed in my computer instead the ones from my application.

The solution that I applied was to delete the node_modules folder and navigate to the root of your directory and run npm install to reinstall all the dependencies that your project needs to use in your project scope.

Environment variables

You would need to configure any environment variables that you are using in your application in Heroku and using the dashboard.

Navigate to `Settings > Config Vars` and add them in the fields KEY and VALUE, using the same key you have used in your code.

What I have learned deploying my app

Deployment is different for every project and configuration will vary from project to project as it needs to serve what the application needs.

It is important that you understand every step of the process, because depending on the needs of your project you might need to configure different things.

Leaning how to read error messages could save you some time.

One trick could be to to look at a bigger picture of your application, how your application has been configured, if it works in local and not in production and from there, go in detail to the error.

And I have also learned that testing when trying to deploy could be very slow, so be patient and don’t give up!