Painlessly write email templates using this project starter. Modernises EDM development by bringing both Browsersync and Webpack together, creating an automated inline-style compiler with all configuration exposed.
Download the zipped source files into a project directory.
Edit templates in
src/templates/ and start the watcher
This starts Browsersync and compiles templates using Webpack. Compiled files will output into
dist/ with both the source and
Navigate using your browser to view the example template
Making changes in
src/ will automatically compile and refresh the page.
│ └ ...
│ └ ...
| └ template.html
src/images/are moved to dist and can be used in the template relatively.
src/styles/contains the structure of styles. It is recommended to follow the structure as it contains client-agnostic styles.
src/templates/houses all templates. These are imposed into the
index.ejsfile's template directive.
src/index.ejsis the base for all templates. It not only serves as a template wrapper, but includes important non-conventional CSS required for email compatibility.
src/index.jsrequired for webpack loaders.
src/styles.scssstyles loaded by webpack. This should link up all styles in the project.
tasks/configuration for webpack and browsersync.
Node v8 or greater
CSS Inliner Juice