Roots Discourse

I got a working Docker image for Sage + Bedrock + SSL/TLS + webpack hot reload but need feedback

Hey guys, I’m completely new to Sage/Bedrock and pretty much to the whole composer thing. Just started Docker earlier this year so please excuse the messy Dockerfile/config files. I like the whole setup of Sage/Bedrock so I thought I’d give it a try. I’m looking for Sage veterans to see if my setup is a viable environment for development.

The Stack

  • alpine 3.10.x
  • traefik 2.x (reverse proxy)
  • code-server v2 beta
  • wordpress 5.2.x
  • nginx 1.17.x
  • php 7.3.x
  • mariadb 10.3.x
  • phpmyadmin 4.9.x
  • wp-cli 2.3.x

I’ve done some light testing but so far JS changes does not reload the entire browser, CSS injects like it should, and PHP files reloads the browser. This setup was configured for a VPS with https as the default protocol because there should be no reason for you not to use https on a public server. This docker-compose.yml sets up the following URLs:

This docker-compose.yml file is pretty much “turnkey,” all you gotta do is replace the domain.tld, emails, credentials, and make sure ports 80/443 are open on your VPS. When you do a docker-compose up -d, the container will start the init process of installing WordPress, Bedrock, and then Sage (web/app/themes/sage). wp-cli will auto install WordPress based on the environment variables. The whole process should take under 10 seconds, due to Sage being a whopping 400mb~ when extracted.

I appreciate some feedback, thank you!

GitHub: https://github.com/demyxco/code-server/tree/master/tag-sage

3 Likes

Very cool!

It’s looks like you are running browsersync on 80 and 443, how are your sage config files modified? Because by default Sage is configured for localhost:3000.

Since this is configured for a VPS, I’ve configured the docker-compose.yml for HTTPS only. You can see what files are touched by looking at my sage helper script. The your-theme/resources/assets/build/webpack.config.watch.js is the file that gets mostly modified. It also gets injected with some BrowserSync config via const variable. The scriptPath and socket are the main keys that makes this work.