CraftCMS-Bootstrap-SASS-Vue Boilerplate

As I discover new technologies, I find my boilerplates evolving and getting better (and more complicated). This project was helped along by several other boilerplates out there. I wanted a project starter that fit my development style with all of the technologies I use in most of my projects.

How it works

This boilerplate is setup using Webpack to devlop on a local server (I use Mamp, but you can use whatever you want). the dev command will allow you to hot reload your changes, it will output files to the /dev directory, which is where your local server should point its root to.

The build command will output all production files to the /public_html directory. Included is a sublime sftp configuration that is setup to automagically ftp any updates to that /build directory into your server. You will need to configure that. Read below for full instructions.

Workflow

Use Node.js (NPM or yarn) scripts to run build tools.

• $ yarn dev - Launches webpack-dev-server and recompiles files whenever they change
• $ yarn build - Creates production ready code inside the /public_html directory and ftp sync'd to the server

After running $ yarn dev or $ yarn build, your deploy-ready code will be taken from the ./src/ directory and placed within the ./public_html/ and ./cms/templates/ directories respectively.

Main Features

This project scaffolding is rather opinionated and makes use of the following tools, open source projects, and architecture methodologies:

• Craft CMS 3 - Craft is a content-first CMS that aims to make life enjoyable for developers and content managers alike.
• Webpack 4 - A bundler for JavaScript and friends with code splitting and Hot Module Replacement set up.
• Bootstrap 4 - Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
• Vue.js 2 - The Progressive JavaScript Framework
• ECMAScript 2015 modules - JavaScript's built-in modules
• SASS - CSS with superpowers
• axios - [Not implemented yet] Promise based HTTP client for the browser and node.js
• ESLint - The pluggable linting utility for JavaScript and JSX.
• Standard JS - JavaScript Standard Style
• Fontastic - Add Vector Icons to Your Website

Installation

1. Download the Boilerplate

To start, run this command in your project directory.

$ cd my-project
$ git clone https://github.com/kinoli/craft-bootstrap-sass-vue-boilerplate ./

{Tip} I'f you want to now start using your own remote repo. Run this command.

$ git remote set-url origin git@gitlab.[YOUR-SERVER].com:GROUP/REPO-NAME.git

2. Install Dependencies

In the project folder run: (yarn seems a bit buggy here, so we'll use npm)

$ npm install

3. Set up the Database

You’ll need to create a database for your Craft project. Craft 3 supports both MySQL 5.5+ and PostgreSQL 9.5+.

If you’re given a choice, we recommend the following database settings in most cases:

• MySQL

  • Default Character Set: utf8
  • Default Collation: utf8_unicode_ci

• PostgreSQL

  • Character Set: UTF8

4. Set up the Web Server

Create a new web server to host your Craft project. Its document root should point to the dev/ folder.

If you’re not using MAMP, you will probably need to update your hosts file, so your computer knows to route requests to your chosen host name to the local computer.

• macOS/Linux/Unix: /etc/hosts
• Windows: \Windows\System32\drivers\etc\hosts

5. Configure Webpack Server

The local webpack server needs to have the same hostname that you setup for the project. Edit the host information in following files.

/.kinoli/webpack.server.js
/.kinoli/webpack.dev.js

6. Setup Craft

Now, run the web server so you can load the Craft installation. This will copy the necessary files into your /dev directory.

yarn dev

You need to duplicate the Craft .env file. This will do it for you

cp cms/.env.example cms/.env

Now run the craft setup script.

cms/craft setup

If you get an error and your web server is setup properly, you can run the Craft installation by pointing your web browser to http://HOSTNAME/index.php?p=admin (substituting HOSTNAME with your new web server’s host name). You should get the Craft installation wizard, which will take you through a couple setup screens, and then perform the actual installation.

{tip} That .env file will be processed via [PHP dotenv], which the craftcms/craft project comes with preinstalled. The advantage of using PHP dotenv is that it offers a place to store sensitive information (like database connection settings) in a file that doesn’t get committed to your Git repository.

7. Configure FTP Deployment

Deployment is done by running yarn build and everything in the /public_html directory needs to be sync'd to your server, as well, any changes in your /cms/templates directory.

To do ftp deployment through your IDE's ftp sync from /public_html and /cms to your webserver. Note, the /cms directory should be a level above your public root directory.

This boilerplate has sftp config setup for VSCode, which I highly recommend, but not required. A sample vscode config file is included in /.vscode/sftp.json, you can simply configure it as needed.

About Craft CMS

Craft is a content-first CMS that aims to make life enjoyable for developers and content managers alike. It is optimized for bespoke web and application development, offering developers a clean slate to build out exactly what they want, rather than wrestling with a theme.

Learn more about Craft at craftcms.com.

About me

I am an experienced full-stack web/app contractor from Canada. I'm always available to assist with questions or bug fixes or to hire (if you need more of my time).

My website: JesseKnowles.com