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 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.
So, what do they do?
Kickoff provides a set of sensible default directories, files and tools that are common across all types of projects.
I'll talk more about how we actually use these tools shortly, but first here’s an overview of each:
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.
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.
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?
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:
Jane should now have all the files she needs to start developing. However, before diving in she’ll have to run
npm install to pull in the project dependencies.
Frontend Development Workflow
At this point Jane is all set and can start writing code. Running
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.
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.
Jane is happy because she’ll never have to copy and paste any template code. John is even happier that he can just focus on hooking up the templates to Craft and not have to think about how best to split up and organise standard HTML files.
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.
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.
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.