This is conversion of the Craft CMS marketing demo site Europa Museum to a Docker-ized setup that uses a modularized webpack 5 setup for frontend tooling.

(Click to Play Video)

Here is the same project using Vite

Related articles & podcasts:

• An Annotated webpack 4 Config for Frontend Web Development article
• An Annotated Docker Config for Frontend Web Development article
• Using Make & Makefiles to Automate your Frontend Workflow article
• webpack inside & out with Sean Larkin podcast

All you'll need is Docker desktop for your platform installed, then spin up the Europa Museum site in local development.

Ensure no other local development environments are running that might have port conflicts, then:

1. Clone the git repo with:

git clone -b docker-webpack https://github.com/nystudio107/europa-museum.git

2. Go into the project's directory:

   cd europa-museum

3. Start up the site by typing this in the project's root directory:

make dev

(the first build will be somewhat lengthy, ignore the warnings from queue_1).

If it appears to hang at Building php_xdebug, your PhpStorm or other IDE is likely waiting for an Xdebug connection; quit PhpStorm or stop it from listening for Xdebug during the initial build.

4. Once the site is up and running (see below), navigate to:

http://localhost:8000

The webpack 5 dev server for Hot Module Replacement (HMR) serving of static resources runs off of http://localhost:8080

🎉 You're now up and running Nginx, PHP, MySQL 8, Redis, Xdebug, & webpack 5 without having to do any devops!

The first time you do make dev it will be slow, because it has to build all of the Docker images.

Subsequent make dev commands will be much faster, but still a little slow because we intentionally do a composer install and an npm install each time, to keep our dependencies in sync.

Wait until you see the following to indicate that the PHP container is ready:

php_1         | Craft is installed.
php_1         | Applying changes from your project config files ... done
php_1         | [01-Dec-2020 18:38:46] NOTICE: fpm is running, pid 22
php_1         | [01-Dec-2020 18:38:46] NOTICE: ready to handle connections

...and the following to indicate that the webpack 5 container is ready:

webpack_1     | <i> europe-museum (webpack 5.9.0) compiled successfully in 12097 ms
webpack_1     | <i> [webpack-dev-middleware] Child "europe-museum": Compiled successfully.

All of the Twig files, JavaScript, Vue components, CSS, and even the webpack 5 config itself will reflect changes immediately Hot Module Replacement, so feel free to edit things and play around.

A password-scrubbed seed database will automatically be installed; you can log into the CP at http://localhost:8000/admin via these credentials:

User: admin
Password: password

This project uses Docker to shrink-wrap the devops it needs to run around the project.

To make using it easier, we're using a Makefile and the built-in make utility to create local aliases. You can run the following from terminal in the project directory:

• make dev - starts up the local dev server listening on http://localhost:8000/
• make build - builds the static assets via the webpack 5 buildchain
• make clean - shuts down the Docker containers, removes any mounted volumes (including the database), and then rebuilds the containers from scratch
• make update - causes the project to update to the latest Composer and NPM dependencies
• make update-clean - completely removes node_modules/ & vendor/, then causes the project to update to the latest Composer and NPM dependencies
• make composer xxx - runs the composer command passed in, e.g. make composer install
• make craft xxx - runs the craft console command passed in, e.g. make craft project-config/apply in the php container
• make npm xxx - runs the npm command passed in, e.g. make npm install

With the containers up and running, here are a few things you can try:

• Edit a CSS file such as src/css/components/header.css to add something like this, and change the colors to see the CSS change instantly via HRM:

* {
  border: 3px solid red;
}

• Edit the src/vue/Confetti.vue vue component, changing the defaultSize and see your changes instantly via HMR (the slider will move)

To update to the latest Composer packages (as constrained by the cms/composer.json semvers) and latest npm packages (as constrained by the buildchain/package.json semvers), do:

make update

To start from scratch by removing buildchain/node_modules/ & cms/vendor/, then update to the latest Composer packages (as constrained by the cms/composer.json semvers) and latest npm packages (as constrained by the buildchain/package.json semvers), do:

make update-clean

Here's the full, unmodified Europa Museum README.md from Pixel & Tonic:

The Europa Museum is a custom Craft CMS marketing website for a fictitious art museum. This repository houses the source code for our demo, which you can spin up for yourself by visiting craftcms.com/demo.

We’ve also included instructions below for setting up the demo in a local development environment with Craft Nitro.

Europa shows off many of Craft’s core features and includes a guided tour courtesy of the Guide plugin.

• Craft CMS 3
• PostgreSQL (11.5+) / MySQL (5.7+)
• PHP (7.2.5+), built on the Yii 2 framework
• Native Twig templates

• Babel with ES6
• Sass
• Laravel Mix with PurgeCSS and Critical CSS
• Highway.js
• GSAP
• Lazysizes
• LocomotiveScroll

If you’d like to get Europa running in a local environment, we recommend using Craft Nitro:

1. Follow Nitro’s installation instructions for your OS.
2. Make sure you’ve used nitro db new to create a PostgreSQL 13 database engine.
3. Run nitro create with the URL to this repository:

   nitro create craftcms/europa-museum europa

   • hostname: europa.nitro
   • web root: web
   • PHP version: 8.0
   • database? Y
   • database engine: postgres-13-*.database.nitro
   • database name: europa
   • update env file? Y
4. Move to the project directory and add a Craft account for yourself by following the prompts:

   cd europa
   nitro craft users/create --admin

💡 If you’re using a different local environment, see Craft’s Server Requirements and Installation Instructions.

Run npm install with node 14.15.0 or later.

If you use a different site URL, update DEFAULT_SITE_URL in .env or the production build process will fail:

DEFAULT_SITE_URL=https://europa.nitro

You can then run any of the development scripts found in package.json:

• npm run watch to watch and automatically recompile assets for local development
• npm run sync to watch files and reload with BrowserSync for local development
• npm run dev to compile assets for local development
• npm run prod to compile optimized assets for production

The source code of this project is licensed under the BSD Zero Clause License unless stated otherwise.

The imagery used by this project is the property of each respective license holder. You are not free to use it for your own projects.