Deploying a Symfony 4 application to Heroku (with Webpack!)

So for my last sideproject I chose Heroku (the free plan) to deploy a Symfony 4 application. The frontend is managed with webpack (ES6, PostCSS, … read this story for more info). The documentation was quite good but I found some blocks while deploying for the first time so I decided to create a step by step guide.

Prerequisites

• First thing to do, very very easy. Create a Heroku account here.
• You must have PHP and composer installed on your computer… of course.

Installing Heroku client

Everything is done in an easy way with the Heroku client. If you have OSX with Homebrew, this is what you need:

brew install heroku/brew/heroku

If you have Ubuntu 16, this is your terminal command:

sudo snap install heroku --classic

Any other help about the installation can be found in this link.

Deploying the application

All the terminal steps should be done inside your project path.

First of all, use the CLI to login to your Heroku account:

heroku login

Now create the Heroku project (read the options below, important):

heroku create

This will create an automatic project name with the default region. Some options you should consider:

• heroku create sexyproject will create a project with the name “sexyproject”. This will be accessible from “sexyproject.herokuapp.com”.
• ... --region=eu will create the project in the EU region (regions can be found here)

Those two are the most important options for me. Feel free to investigate more create options.

Now, you need to create the project env variables. This configuration variables can be created from the Heroku settings webpage (something like https://dashboard.heroku.com/apps/SEXYPROJECT/settings) or… with the CLI (indeed!). For Symfony 4:

• HOST: you can use “sexyproject.herokuapp.com”
• SCHEME: https (Heroku has a valid HTTPs certificate)
• BASE_URL: usually /
• APP_ENV: prod
• APP_SECRET: whatever you want :)

Create those variables from the website or:

heroku config:set SYMFONY_ENV=prod

And… what about the database connection? Well, we need a database first. Navigate to your Heroku project and select the “Resources” tab. There you can see “add-ons”. Select ClearDB MySQL, it’s free, but… you need to add a valid credit card. TIP: I created a virtual card with 0 € on my bank website and that’s it. When you add this database, a new configuration variable is created: CLEARDB_DATABASE_URL. Do not delete this variable, just create a new one called DATABASE_URL with the same value.

Last mandatory step. Create a Procfile file in the root of your project. This is going to tell Heroku to start the Apache webserver using the public/ folder as root:

web: $(composer config bin-dir)/heroku-php-apache2 public/

You can also use other webservers. Read about this here.

It’s not mandatory but it’s very useful to redirect the prod logs so you can read them from the Heroku CLI. This is the monolog prod configuration:

nested:
    type: stream
    path:  "php://stderr"
    level: debug

You can read more about this best practice here.

Now you can test the deployment. To launch the Heroku process, just:

git push heroku master

If you want to deploy another branch:

git push heroku your_branch:master

If you did everything OK, your project should be accessible from the Heroku subdomain, but what about your webpack files?

Compiling your assets: webpack

Your project is auto-detected as a PHP application, so the NodeJS environment is not launched. You have to manually add the buildpack to get your yarn.lock file processed.

First of all, let’s create some environment variables:

• NPM_CONFIG_PRODUCTION to false
• YARN_PRODUCTION to false
• NODE_MODULES_CACHE to false

All the information can be found here.

Now, let’s tell Heroku that our project is PHP but NodeJS too. The magic is done with the following command:

heroku buildpacks:add --index 1 heroku/nodejs

Now, if you type heroku buidpacks you should see something like this.

=== sexyproject Buildpack URLs
1. heroku/php
2. heroku/nodejs

Almost finished! Now add the following script in the package.json file:

"scripts": {
  "build": "webpack -p --config ./resources/webpack/webpack.config.js --display-error-details",
  "watch": "webpack -d --watch --config ./resources/webpack/webpack.config.js --display-error-details",
  "heroku-postbuild": "webpack -p --config ./resources/webpack/webpack.config.js"
},

Please, check your webpack config, this one follows my previous story!

Now, commit and push again:

git push heroku master

There you have! A Symfony 4 application, with database and webpack working! But… where are my migrations?

Easy, again! Run heroku run bash, wait some seconds until it connects and then just run bin/console doctrine:migrations:migrate. That’s all.

Thanks a lot Heroku for your awesome service.