This post belongs to the Trello clone with Phoenix Framework and React series.
- Intro and selected stack
- Phoenix Framework project setup
- The User model and JWT auth
- Front-end for sign up with React and Redux
- Database seeding and sign in controller
- Front-end authentication with React and Redux
- Setting up sockets and channels
- Listing and creating new boards
- Adding new board members
- Tracking connected board members
- Adding lists and cards
- Deploying on Heroku
Deploying on Heroku
We finally made it. After 11 parts we've learned how to setup a new Phoenix project with Webpack, React and Redux. We have created a secure authentication system based on JWT tokens, created migrations for the necessary schemas for our database, coded socket and channels for realtime features and built a GenServer process to keep track of connected board members. Now is time to share it with the world by deploying it on Heroku. Let's do this!
Setting up Heroku
Before going any further we'll assume we already have a Heroku account and the Heroku Toolbet installed. For deploying Phoenix applications on Heroku we need to use two different buildpacks, so lets create the new application using the multi-buildpack:
$ heroku create phoenix-trello --buildpack https://github.com/ddollar/heroku-buildpack-multi
This will create our new application on Heroku and add the git remote
repository that we'll use for deploying. As just said before, we need two different
buildpacks for a Phoenix application:
- heroku-buildpack-elixir: Main buildpack for Elixir applications.
- heroku-buildpack-phoenix-static: For static assets compilation.
To add both of them lets create a
.buildpacks file and add both of them:
# .buildpacks https://github.com/HashNuke/heroku-buildpack-elixir https://github.com/gjaldon/phoenix-static-buildpack
If we need to change any aspect regarding the new Elixir production environment, we
can do it by adding a
# elixir_buildpack.config # Elixir version elixir_version=1.2.3 # Always rebuild from scratch on every deploy? always_rebuild=true
In our case we are specifying the Elixir version and also forcing the environment to
rebuild everything, included dependencies, on every deployment. The same can be done
for static assets by adding a
# phoenix_static_buildpack.config # We can set the version of Node to use for the app here node_version=5.3.0 # We can set the version of NPM to use for the app here npm_version=3.5.2
In this case we are specifying the
npm versions we need for Webpack
to build our static assets. Finally we have to create a
compile file where
we'll set how to compile our assets after every new deployment:
# compile info "Building Phoenix static assets" webpack mix phoenix.digest
Note that we run the
phoenix.digest mix task after the
to generate the digested and compressed versions of the assets.
Setting up our production environment
Before deploying for the first time, we need to update the
prod.exs file with
some necessary configuration changes:
# config/prod.exs use Mix.Config # ... config :phoenix_trello, PhoenixTrello.Endpoint, # .. url: [scheme: "https", host: "phoenix-trello.herokuapp.com", port: 443], # .. secret_key_base: System.get_env("SECRET_KEY_BASE") # .. # Configure your database config :phoenix_trello, PhoenixTrello.Repo, # .. url: System.get_env("DATABASE_URL"), pool_size: 20 # Configure guardian config :guardian, Guardian, secret_key: System.get_env("GUARDIAN_SECRET_KEY")
Basically what we are doing is enforcing it to use our Heroku application's url and
enforce the SSL connection provided. We are also using some environment variables
to configure the
url and guardian's
url will be automatically created by Heroku once we deploy it
for the first time, but for the other two we need to generate them and add them using
the command line:
$ mix phoenix.gen.secret xxxxxxxxxx $ heroku config:set SECRET_KEY_BASE="xxxxxxxxxx" ... ... $ mix phoenix.gen.secret yyyyyyyyyyy $ heroku config:set GUARDIAN_SECRET_KEY="yyyyyyyyyyy" ... ...
And we are ready to deploy!
After committing all this changes to our repository, we can deploy the application by simply running:
$ git push heroku master ... ... ...
If we take a look to the console output we can see how both buildpacks do their job by installing Erlang and Elixir with their necessary dependencies as well as node and npm among other tasks. Finally we need to run the migration in order to create the database tables:
$ heroku run mix ecto.migrate
And that's it, our application is deployed and ready to go!
Deploying a Phoenix application on Heroku is pretty easy and straightforward. It might not be the best solution around, but for a demo application like this it works really well. I hope you have enjoyed building and deploying this application as much as I have. While writing the whole series I've made a lot of changes to the final codebase, correcting some stuff and adding a lot more features. If you want to check them don't forget to visit de demo or fork the repository:
Thanks for reading and for the support :)