Craft Boilerplate

This project is based on the official Craft starter project

Table of Contents

• Environment Considerations
  • xcode Installation
  • MAMP Installation
  • Composer Installation
  • Node Installation
• New Project Setup
• Miscellaneous Information
• Project Specific Information
• About Craft CMS

(Mac OSX only) xcode Installation

Run: $ xcode-select --install and follow the instructions. It can take a few minutes to install.

MAMP Installation

You can download MAMP here and find the installation instructions here.

Composer Installation

CraftCMS uses PHP Composer to manage Craft updates, plugins, and other things related to CraftCMS. While there are installation instructions for various operating systems, we have found that the most common setup (i.e. MacOSX and Ubuntu Linux) can be installed by doing the following:

1. Ensure that you have PHP installed
2. Download and save the Composer installer here: https://getcomposer.org/installer
3. Open a terminal and go to the directory in which you saved the Composer installer.
4. Run the following command from the terminal in order to install Composer globally (assuming the file you downloaded and saved is named "installer":
   $ php installer --install-dir=/usr/local/bin --filename=composer
5. Run $ composer --version to verify that the installation was successful.

If all goes well and you were able to install Composer globally, then this is the only time you will have to install Composer.

Node installation

CraftCMS projects based on craft-boilerplate utilize nodejs, npm, and laravel mix, in order to run SASS processing, javascript minifcation, and autoprefixing.

Find out how to download and install node for your environment here (which includes npm): https://nodejs.org/en/download/

New Project Setup

Follow these instructions when you need to start a brand new CraftCMS from scratch, utilizing this bootstrap project as a foundation and a starting point.

New Project Setup

1. Ensure that you have installed all required software - see Environment Considerations
2. Download the latest archive master version of the craft-boilerplate project, found here
3. Create a new directory for the new project and unzip the craft-boilerplate archive into this directory.
4. Open up a terminal and change the directory where you unzipped the archive above.
5. Run $ composer install --no-scripts, which will download Craft and all associated plugins.
6. Run $ composer run-script post-create-project-cmd, which will guide you through the "CraftCMS Initialization" steps that ultimately create an .env file and set your security key.
7. Add a new site/database to MAMP and make sure a database is available for Craft to be installed into.
8. MAMP users need to make sure and uncomment a line in the .env for BACKUP_COMMAND, RESTORE_COMMAND, and DB_SOCKET
9. Run $ ./craft setup and follow the instructions, which will fill out the rest of the fields in your .env file and set up the database for first-time use.
10. Run $ npm install, which will install all Node dependencies for this project.
11. Access your control panel at /admin and login using the credentials you created during installation. Browse to Settings -> Plugins, and install each of the plugins listed.

Miscellaneous Information

File/Directory Structure

This CraftCMS project expects certain files to be in specific locations in order to be used.

• assets/ - Parent directory where javascripts/sass files are stored
  • assets/javascript/ - Your project's javascript files go here.
  • assets/sass/ - Your project's SASS files go here (Tailwind CSS by default).
• config/ - Parent directory which holds configuration files
  • config/db.php - Database configuration, but mostly pulled from .env
  • config/general.php - General CraftCMS configuration file
  • config/license.key - License key that gets generated upon site bootstrap.
  • config/project.yaml - Project Config settings to help sync your fields/sections/settings across environments.
• modules/ - Holds any custom Yii modules you might be using
• public/ - Project's site root according to your webserver
  • public/images/ - Project's non-asset images are stored here (git controlled)
  • public/index.php - Root PHP file read by the webserver
  • public/uploads/ - Parent directory for all uploaded assets (not git controlled)
  • public/assets/ - Compiled assets (js/sass/etc) get put here (not git controlled)
• scripts/ - Utility shell scripts to perform various functions
• storage/ - CraftCMS dynamically generated files, such as logs and backups.
• templates/ - The location for all Twig templates
• .env.example - Example .env file
• composer.json - PHP Composer configuration file
• composer.lock - PHP Composer package information lock file
• craft - CraftCMS PHP console application
• craft.bat - CraftCMS console loader for Windows
• favicon.js - Automated utility for saving favicon and other files like that
• tailwind.config.js - Tailwind css configuration
• webpack.mix.js - Laravel Mix configuration (sass/js compilation, etc)
• package.json - npm packages configuration file
• package-lock.json - npm packages information lock file

More detailed information about the default structure can be found here: https://craftcms.com/docs/5.x/system/directory-structure.html

.env

• Database and environment name are set in the .env file when you craft setup
• This file is not tracked in git, helping to keep passwords more secure

Nginx

• My development environment is setup using apache which I find a tad simpler to work with locally
• Refer to this repo if the staging/prod environment is not using our setup scripts
• It may be a little heavy handed so an alternative with the least amount of required bits is here

NPM/Laravel Mix

• Laravel Mix makes webpack implementation very easy and has a fairly basic setup for Sass and JS merging

Database

• No database is included.
• Add a blank database to your local host and then fill in the details of that when running ./craft setup
• Go to yourdomain.test/admin and craft will install a new version into that empty database

SASS

• Tailwind CSS is included in the project

Craft Scripts

• Use these scripts to pull down db and assets
• Change the settings in the /scripts/.env.sh file to match your local machine and the remote server

Craft is a flexible, user-friendly CMS for creating custom digital experiences on the web and beyond.

In technical terms, it’s a self-hosted PHP application backed by a MySQL or Postgres database. Read more in the official documentation.

Psst! Looking for the Craft source code? Need to file a bug report or feature request? Check out craftcms/cms.

:postal_horn: If you just heard about Craft: Take a feature tour on our website—then spin up a demo project to try it out for yourself.

:construction_worker_woman: If you are eager to start building: You’re in exactly the right place!

Getting Started

This repository is a bare-bones Composer “project”, intended for use with the composer create-project command. It contains only the folders and files absolutely required to run Craft.

[!TIP]
Our tutorial covers this setup process in greater depth. If you get stuck, give it a once-over; if things still aren’t clicking, help is never far away in our community or via official support.

You can also find these instructions (and some other helpful tips) in the documentation.

The best way to spin up your first project is with DDEV, a cross-platform, Docker-based PHP development environment.

1. Install DDEV

2. Choose a folder for your project and move into it:

   cd /path/to/web/projects
   mkdir my-project
   cd my-project

3. Configure a new DDEV project, and install Craft:

   ddev config --project-type=craftcms --docroot=web
   
   # Use this package as a starting point:
   ddev composer create -y --no-scripts craftcms/craft=^5.0.0
   
   # Run the Craft CMS installer (use all defaults):
   ddev craft install

4. Run ddev launch to open the project in your browser.

Craft’s control panel is located at /admin. The rest is up to you! Pick up where we left off in the tutorial, or dive right in on modeling your own content:

• :card_file_box: Elements: Learn about Craft’s core content types, and how to customize them.
• :triangular_ruler: Fields: Create precisely the data structure and authoring experience you need.
• :pencil2: Templating: Start using your data in a totally custom front-end.

Resources

Craft comes with a ton of official and community resources.