Node (use nvm for managing versions) and Yarn are required to build this project.
yarnyarn build [--production]
Passing the production will minify the output and apply some other optimizations. See below for how this works.
The majority of the project lies in the src/ directory.
This should should exist for every page of the website.
This is the base for that particular page, it should include the following at the beginning.
{% extends "../../templates/base.njk" %}Optional TypeScript module that will only be executed on that page. Tf any page shares any code, it should be moved to the App namespace.
Any addition css to be loaded on that page.
Any precompiled data to be passed to the nunjuck compiler for that page. See src/pages/team/data.json for an example.
Collection of Nunjuck templates, macro and utils for building pages and components.
The core of the app.
Each module should be prefixed with a number to ensure that they are loaded in the correct order.
Start the development server, then open localhost:3000 in your browser. Any changes you make will be automatically reflected on the page without having to reload.
yarn dev-
First the bundler searches for all JavaScript files in the
src/vender/folder.-
With all of the files, are combined into one giant file, with some extra code to ensure they don't collide with each other.
-
Them the file to passed to babel where it processed twice, once for a legacy build and again for a modern build.
-
The code is written in TypeScript and includes a syntax that most browsers don't support. To accommodate, we transpile every file into a state that all browsers support with polyfills added for dumb browsers like IE.
-
The modern bundle is just an optimized version of the source code with the type system stripped out.
-
-
-
Secondly the bundler does the same for all JavaScript/TypeScript files in the
src/app/folder as it thesrc/vender/folder.- The app bundle also has the output file annotated to indicate where each section of the file originated from.
-
Thirdly the bundler will compile the App css in
src/app/app.scss-
Instead of normal
css, we use scss. scss is like css but support many more features, like variables, mixins, functions, and more importantly nested styles.
This removes the need for writing repetitive selector, which produces more clean and readable code. All of this can however be compile down to normal css. -
After we run out scss through the scss compiler, we throw the resulting css through the postcss tool. This adds browser prefixes and polyfills to our css to support all browsers.
-
Also if we are in a production build, we use the cssnano plugin for postcss, to minify the resulting css.
-
-
Lastly, we gather all of the pages for the site in
src/pages/- Each page is ran through the nunjucks compiler
- If a TypeScript file exists for that page, we also transpile the file as we did above, but we keep it separate from everything else.
- If a
scssfile exists for that page, we also run it through the bundler, and output it as a separate file. - With the
app,venderand optional page script, we inject the resulting scripts into the bottom of the<body>tag.- This makes use of the
nomoduleandtype="module"attributes to serve the correct bundle to the correct browsers. - Older browsers like IE, don't support the
typeattribute to be anything other thanapplication/javascript, so it will load the corresponding script with thenomoduleattribute. - New browsers allow the
type="module"and recognize script tags with thenomoduleas being for legacy browser so they don't load them.
- This makes use of the
The development server also works like this but watches for changes in any of the files above. The server then will rebuild the files needed and send the updates to your browser.