Refining our web development process

For a while now we’ve been working on a way to help us get started on new web projects quickly.

The team recently got together to work on updating our process so that it was easier for everyone involved.

Our discussions resulted in the following wish list:

• We wanted as much consistency across our Craft CMS, Laravel and Symfony-based projects as possible.
• We wanted it to be easy for frontend developers to work on just templates, JavaScript and CSS without having to install Craft CMS or Laravel.
• We didn’t want to have to update multiple ‘boilerplate’ projects every time something shared across them all changed.
• We wanted Laravel and Craft CMS developers to be able to pickup where the frontend team left off.

We know all team members have their own preferences when it comes to organising their projects so we didn't want to dictate and enforce too much. What we’ve put together is a sensible starting point that everyone can get on board with.

In order to meet the points on our wish list we've created Kickoff and Kickoff Installer.

So, what do they do?

I'll talk more about how we actually use these tools shortly, but first here’s an overview of each:

Kickoff

This project allows you to kick-start the development of a website or web application. Hit the ground running with pre-configured Gulp tasks, linter configurations, a sensible directory structure and default meta files.

Kickoff Installer

The installer is what pulls everything together. A lot of the time it is just moving files around for us and helps to reduce the amount of time we spend on repetitive tasks.

Typical Use-case

Design Sign-off

Let’s assume we’ve just had design sign-off from the client – they’re pleased as punch with the static visuals we’ve been delivering and are happy for us to start building their site.

We know we need to work with a couple of external partners to complete this project and it just so happens that both haven’t worked with us before.

Jane is going to be helping us out with frontend development, while John is going to take Jane’s work and hook it up to Craft CMS.

So, what will their project process look like?

Initial Assumptions

We’re going to assume that John and Jane already have Composer and NPM (or Yarn) installed on their machines.

Installing the Kickoff Installer

Both John and Jane are going to need to install our Kickoff Installer by entering the following in their terminals:

composer global require "club/kickoff-installer"

This will allow them to run a selection of Kickoff commands from any directory.

Starting the project

As Jane is starting the project she will need to create a directory on her machine that will house the project code and move into that directory.

mkdir new-project && cd new-project

Once inside we can pull in Kickoff and start getting to work:

kickoff new

Jane should now have all the files she needs to start developing. However, before diving in she’ll have to run yarn or npm install to pull in the project dependencies.

Frontend Development Workflow

At this point Jane is all set and can start writing code. Running gulp watch --compileTemplates will fire up a watcher that will compile SASS, JavaScript and Twig templates whenever Jane creates or updates her files.

The ability to use Twig means that Jane can start to organise the project templates and leverage Twig’s include and extends functionality right off the bat.

The Handover

Jane continues to build out the frontend of the site and commits her work to a Git repository when she’s done. She pushes her work up to the staging server for both the client and John to see.

John is ready to get to work now, so he clones the project repository to his computer and runs yarn so he has the all the necessary dependencies too. He’ll need them so he can compile the asset files that Jane has created.

Installing Craft

John only has to run kickoff add CraftCms to pull Craft into the project. Kickoff will automatically configure Craft and tell it to look for Jane’s templates in the correct location.

All that’s left is for John to add his database credentials to the included .env file and he’s ready to start linking the site up to Craft.

On-going Maintenance

Since John has installed Craft CMS around Jane's original work it's not going to be difficult for Jane to jump back on the project and make a couple of changes in a few months time!

That's a much better situation to be in that having to work out what someone else has done with the templates you'd painstakingly organised.

Taking it further...

We're still testing the waters at the moment and have been collecting feedback from those that have used this workflow, but it's already taking our development processes in the right direction.

There's still more we want to do in terms of automation; a lot of which will be baked into the Kickoff Installer in the near future. In the meantime, read through the Kickoff Wiki if you're interested in learning more.