Skip to content

Latest commit

 

History

History
64 lines (37 loc) · 2.69 KB

README.md

File metadata and controls

64 lines (37 loc) · 2.69 KB
Raw

Sitediff-Site

Deployment

docker-compose up --build -d prod

You may then access the site by visiting https://localhost:18180

Development

docker-compose up --build -d dev
docker-compose exec dev yarn install
docker-compose exec dev gulp build

You may then visit http://localhost:18180 to access the site.

Two containers are defined in docker-compose.yml. One for the purpose of production and/or distributing this site as a docker image independent of any code. This is referrer to as prod. It does not mount volumes, all code lives as a static assets within the image. Code is compiled by Docker during the build process and assets used only for the purpose of compiling are discarded and not committed in the resulting image. Updates to the code require a rebuild of the image.

A second container for the purpose of development referred to as dev. This container includes the build dependencies of npm/yarn and gulp. Here we mount the codebase in ./code and can run gulp watch to actively develop the site by modifying the contents of the code directory. Hard refreshing the page in the browser will then update the site.

Opening a Shell in the Dev Container

docker-compose exec dev sh

Notes: npm install does not work in volume mounts. Instead we must use yarn install in it's place. yarn version locks dependencies with the yarn.lock file. To install the latest version of these dependencies while still respecting the version constrains in package.json run yarn upgrade within the container.

Layout

All custom code goes into code/src/ folder. The web/ folder is generated during the build process and is excluded from the repo.

  • code/src
    • images
    • pug
    • sass

Gulp

To run gulp watch open a dedicated terminal window and run the below command. Once you are done you may run Ctrl + C to exit gulp watch.

docker-compose exec dev gulp watch

Images

All images/assets such as .png .jpg .svg goes into this folder. It will be copied over to web/images on build.

Pug

Template engine Pug will be used to generate HTML. All files within root of code/src/pug/ directory will be made into a .html file of the same name over the web folder and can be accessed by visiting http://localhost/<file_name>.html. All internal folders won't be compiled and will serve only as resources for includes. gulp watch will watch for changes in any .pug file in src/pug or it's subfolders.

Sass

Gulp will compile only code/src/sass/styles.scss into web/css/styles.css. This file should only have includes for other resources. Gulp watch will trigger for changes in any .scss file in src/sass/ or it's subfolders.