Setting Up the Craft CMS Project

In this course, we are using a starter project that con­tains the tools and set­tings for a reli­able local devel­op­ment envi­ron­ment. It is forked from Andrew Welch’s Craft 3 with Vite scaf­fold­ing project, and sim­pli­fied and cus­tomized for this course.

Before you get start­ed, make sure you have Dock­er Desk­top installed and run­ning on your lap­top or com­put­er. The eas­i­est way to get the cor­rect ver­sion of Dock­er Desk­top for you is via the Dock­er Desk­top down­load page. Install the appli­ca­tion and then launch it so it is running.

You can access the project via the Github repos­i­to­ry. It is set up as a tem­plate repos­i­to­ry, so click the green but­ton to copy the code over to a new repos­i­to­ry on Github.

Once your new repos­i­to­ry is cre­at­ed, it’s time to clone that project on your local machine.

git clone [email protected]:YourAccount/your-repository-name.git

Start­ing Up the Project

The starter project uses make com­mands to bun­dle up the var­i­ous com­mands you’ll need to use to start, stop, and do oth­er things in the project. 

When you are work­ing local­ly, you’ll want to start up the project using make dev. This runs a series of com­mands, includ­ing docker-compose up. If it is the first time you’ve run the project, then it will also down­load and spin up the cor­rect Dock­er containers.

make dev

You’ll want to wait for the out­put in the com­mand line to show ​“Ready to han­dle con­nec­tions” before pro­ceed­ing. It shouldn’t take long to build but the time required will depend on your speed of your lap­top or computer.

Next, we need to build our dist direc­to­ry that serves up our fav­i­cons, man­i­fest files, etc. This isn’t required but it’s nice to have it all work­ing prop­er­ly. We build that direc­to­ry using the make build com­mand, which builds the project for production.

make build

The site is avail­able at localhost:8888 and you should be able to access it in your brows­er. Append /admin to access the Craft con­trol pan­el, which should prompt you to log in (user­name: admin, pass­word: password).

Get­ting the Sta­t­ic Assets

We don’t need to trans­fer or set up CSS or JS assets for this project becase we’re rely­ing on Tail­wind and a few cus­tomiza­tions to Tail­wind that are already includ­ed in the starter project. 

But, we do need to get the images from the sta­t­ic tem­plates project (access that in its Github repos­i­to­ry by down­load­ing the lat­est release zip file).

We’ll need to move over the images inside of the images direc­to­ry and move them to cms/web/img/site direc­to­ry in our starter project. 

Test­ing the Project

Let’s paste in some of the sta­t­ic code from the tem­plates project to make sure every­thing is work­ing properly.

In the index.html tem­plate, copy every­thing inside and includ­ing the body tag, and then paste it in to the index.twig in the starter project, replac­ing the body section.

We’ll need to update some image paths to be img/site/ instead of the defaults in the sta­t­ic template. 

If you load the project home­page at localhost:8888, you should a prop­er­ly ren­dered home­page with the images and styles all work­ing as expected. 

Com­mit­ting Our Changes

Since this is a course on ​“real world” Craft CMS, we want to make sure we com­mit our changes to our Git repository. 

You can access my ver­sion of the site for this video in the Git branch called set­ting-up-the-craft-cms-project.