Skip to main content

Dev Study: Converting this site from Laravel to Drupal 8

Dev Image

This site has been live now for about a year. Constructed in Laravel and using the excellent bulma framework it was crying out for a CMS. I tried to make a home made one in laravel but Drupal was crying out.

Old habits die hard and I was soon missing the simplicity and ease of content creation that Drupal affords. I'd hardly blogged in that time because of the sheer hassle it was to create a deployment (I did have it actually talking to another Drupal site once and consuming the blog articles that way however it proved to be unreliable). 

So I decided to recreate the site in Drupal. Surprisingly it only took a day and I managed to improve upon some of the frontend aspects. 

Here's how it was done:

Creating the site

First I created a new site using Drupal Composer this is as simple as running:

composer create-project drupal-composer/drupal-project:8.x-dev some-dir --stability dev --no-interaction

This gave me the skeleton of a Drupal site. After that it's time to get it into git:

git init

Because it's just my site and I'm the only one that is going to develop on it I've chosen not to have any branch workflow. Normally, I'd advocate something like the gitflow methodology.

Backend

One of the advantages of creating a site with Drupal Composer is that it comes with the drupal console and drush already installed. So when I come to create my new theme all it took was:

./vendor/bin/drupal generate:theme

I've based the theme off the stable base theme and I always copy the entire templates directory from the base theme into my theme for easy access:

cp -R web/core/themes/stable/templates web/core/themes/custom/mytheme/.

Then I enable env support. This means that I can set things like the database password by setting environment variables either on the server or via a .env file.

Next, it's time to create a database. For a site like this I usually just develop locally on my Mac. No VM, no docker as simple as just running

drush rs

There's an argument for keeping your development environment as similar as possible to the production environment, and it's a valid one. However on OSX there's currently an issue with performance with Docker for mac and the file system. Using a simple php dev server serves my purpose for a project this small.

Frontend

Typically I use Laravel Mix for my front end asset compilation. This is a simple wrapper around webpack for the compilation of CSS and Javascript. It transpiles ES6 to ES5.

To install it:

npm install --save laravel-mix
cp node_modules/laravel-mix/setup/webpack.mix.js ./

Then inside the package.json I replace the script section with:

"scripts": { "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }

Note: this only works on a *nix environment. For Windows set the environment variables with SET instead. Or use the npm package cross-env

As the previous site was already built I just copied the files over into this. I then registered the css library in mytheme.libraries.yml and enabled the theme.

Drupal Theming and Site-Building

For this site I've decided on utilising the new Layout Builder module that comes with Drupal core. This allows me to create dynamic layouts with a GUI. It'll be great for creating landing pages. It's still in experimental status and it's not recommended for use on production sites. I'd not advise you to use this on your website just yet as it does have some bugs still. 

I created a content type called Landing Page and then enabled the layout builder for it. I then created the front page using that and copied over a few layouts from the old Laravel version. This proved to be rather simple.

Next was creating the contact form. For this I used the excellent webform module. This module has come on leaps and bounds since it was ported to Drupal 8 and it's more than a match for any other competing paid for webform solution.

Hosting and CI

For hosting I've chosen to containerise it. This gives me the flexibility to host it on any cloud platform that I choose. I already have a cluster of servers which are hosted on both AWS and Digital Ocean. To orchestrate these I use the excellent orchestration system, Rancher, which allows me to simply and visually create a Kubernetes cluster. 

To perform the build I've used Bitbucket pipelines. This allows me to create, in yml format, a way to build the docker image and publish it to Rancher. No manual deployments and an easy way to revert failed deployments.

 

So that's basically how this site was created. In the future I'm hoping to spend some time on each individual technology that I've listed here and go over in detail how to use them with small but useful tutorials.

In summary here's the technology that was used:

  • Drupal
  • Docker
  • SASS
  • Bulma
  • Rancher
  • Kubernetes
  • Bitbucket Pipelines

It was a simple build, but I believe it's a robust enough process to scale to much larger sites and teams.

Any comments?