Home

How it works:

These notes are really for me because I'm totally not going to remember how this fucking thing works a month from now. There are three systems at work (Gulp, Express and the website itself), and they all handle a critical task.

Gulp

Gulp is responsible for rebuilding the completed email template. It uses the information in instructions/build.json to physically build out the final email template contained in output/template.html. It constructs the file according to the data found in instructions/build.json and the template partials contained in html/*.

Express Server

Uses APIs to upload images as well as update the build.json. It also saves/loads various loadouts.

Website

When the site is running, it will fetch data contained from instructions/build.json. This data can then be changed. When changes are made, it will automatically POST that data. This triggers Gulp and the email template is rebuilt.

How it works

• On the site, changes to the data model are being watched and will trigger createOutput().
• createOutput() will POST the data model and will rewrite instructions/build.json.
• Gulp is watching for changes in this file, and will rebuild output/template.html.
• After that happens, it will trigger fetchPreview().
• fetchPreview() will trigger the refreshIframe() in the html/iframe.html, updating the iFrame with the contents of rebuild/template.html

Dev Mode vs App Mode

// development mode
npm run dev

// app mode
npm run build
gulp

While the site is in Dev Mode the server is not running (it will be using Webpack). Use this to the develop the site only. It will not use save/load actual data but will instead utilize unchangeable dummy data. Dev Mode will also display a huge orange banner at the top of the page to eliminate any confusion.

App Mode is the site running using live data. Changes made in Dev Mode must be compiled first. Gulp will start the server (and begin watching for changes in instructions/build.json).