Skip to content
develop
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
cms
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

devMode.fm

About nystudio107/devmode

This is the source code to the devMode.fm website, which is the home for the devMode.fm podcast. It's MIT licensed, so you can do what you like with it, providing the copyright notice & license stay intact.

Pull Requests are welcome, and Issues are welcome as well.

Google PageSpeed Insights

Techniques and Technologies

The project is based on Craft CMS using a unique templates/_boilerplate system for web/AJAX/AMP pages, and implements a number of technologies/techniques:

...and probably a bunch of other stuff too.

The following Craft CMS plugins are used on this site:

  • Disqus - for the Disqus comment handling, async loaded
  • FastCGI Cache Bust - to bust the FastCGI cache whenever entries are modified
  • iCalendar - for parsing the ICS calendar feed from Trello
  • ImageOptimize - for the optimized images and srcsets used on the site
  • Minify - to minify the HTML and inline JS/CSS
  • Retour - for setting up 404 redirects
  • SEOmatic - for handling site-side SEO
  • Transcoder - for transcoding the uploaded podcast audio into a format that's optimized for size & quality
  • Twigpack - for loading webpack-generated manifest.json resources in a modern way
  • Typogrify - for smart quotes and other typographic ligatures
  • Webperf - for monitoring web performance

You can read more about it in the Setting up a New Craft 3 CMS Project article.

Try devMode.fm Yourself!

Initial setup

You'll need Docker desktop for your platform installed to run devMode 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 https://github.com/nystudio107/devmode.git
  1. Go into the project's directory:
   cd devmode
  1. 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.

  1. Once the site is up and running (see below), navigate to:
http://localhost:8000

The webpack-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, Postgres, Redis, xdebug, & ffmpeg 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 container is ready:

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

All of the Twig files, JavaScript, Vue components, CSS, and even the webpack config itself will relfect changes immediately Hot Module Replacement and webpack-dev-server, 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: andrew@nystudio107.com
Password: password

Makefile Project Commands

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
  • make pulldb - runs the scripts/docker_pull_db.sh script to pull a remote database into the database container; the scripts/.env.sh must be set up first
  • make restoredb xxx - runs the scripts/docker_restore_db.sh script to restore a local database dump into the database container; the scripts/.env.sh must be set up first

Things you can try

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

  • Edit a CSS file such as src/css/components/global.pcss 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/DevmodePlayer.vue vue component, changing the currentSeconds data prop from 0 to 1000 and see your changes instantly via HMR (the slider will move)

  • Set up the .env.sh file in the scripts/ directory if you want to use the scripts there by running this in your terminal from the project root: cp scripts/example.env.sh scripts/.env.sh

  • Build the production assets by typing make build to build the critical CSS, fonts, and other production assets. They will appear in cms/web/dist/ (just double-click on the report-legacy.html and report-modern.html files to view them)

N.B.: Without authorization & credentials (which are private), the make pulldb will not work (it just runs scripts/docker_pull_db.sh). It's provided here for instructional purposes, and for devMode.fm hosts

Other notes

To update to the latest Composer packages (as constrained by the cms/composer.json semvers) and latest npm packages (as constrained by the docker-config/webpack-dev-devmode/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 docker-config/webpack-dev-devmode/package.json semvers), do:

make update-clean

To use Xdebug with VSCode install the PHP Debug extension and use the following configuration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "log": true,
            "externalConsole": false,
            "pathMappings": {
                "/var/www/project/cms": "${workspaceRoot}/cms"
            },
            "ignore": ["**/vendor/**/*.php"]
        }
    ]
}

Deployment

buddy.works is used for atomic deployments where the webpack build and composer install are done in buddy.works Docker containers. The the results are then deployed to the Forge-provisioned VPS vis rsync.

Forge Daemon Queue Runner:

/usr/bin/nice -n 10 /usr/bin/php /home/forge/devmode.fm/current/craft queue/listen --verbose

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.

Roadmap

  • Move to containerized builds in buddy.works & atomic deployments