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.
- 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:
Now create the Heroku project (read the options below, important):
This will create an automatic project name with the default region. Some options you should consider:
heroku create sexyprojectwill create a project with the name “sexyproject”. This will be accessible from “sexyproject.herokuapp.com”.
... --region=euwill 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_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:
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
Almost finished! Now add the following script in the
"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.