Skip to content

1.) How it works

Jump to bottom
Allen Royston edited this page Jul 30, 2018 · 2 revisions

Quickstart

This is all you need to do to get started immediately. If this doesn't work something is broken.

git clone https://github.com/allenRoyston/emailgenerator
cd emailgenerator
npm install
npm run build
gulp

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).

NPM Commands

// start dev mode (see above)
npm run dev

// force a webpack build of the most up to date code (generally ran if you've made changes in dev mode)
npm run build

// start the server (primarilly used to test APIs)
npm run server

GULP Commands

Generally speaking you shouldn't have to run these at all, sans the main _gulp _command. However, in a few instances it might be worth running for diagnostic reasons.

// starts server, watches for changes in instructions/build.json
gulp 

// will rebuild the email template (outputs to output/template.html) - also used to test the build process
gulp build

// removes output/template.html 
gulp clean

Clone this wiki locally