This is the sauce for dg707.com.
To run the site locally, do npm run dev
which will kick off node running on port 80
and webpack running on port 8081
.
In this mode, the webpack dev server (a little express jobby) serves up the code.
Webpack will import CSS where it is required from within the components. All CSS must be imported into a component
hence App.jsx
references layout.scss
, resets.scss
, typography.scss
etc. Production treats CSS differently.
To build for deployment run npm run build
.
During the build for production, all references to scss
files from within components are gathered and processed
into a single main.css
file which is hashed and then loaded into index.html
.
The entry point for the server is index.js
which does nothing more than require babel-register
and call server.js
.
Then it's ES2015 all the way down.
In production, index.js
looks at this file to get the hash that it needs to reference the JS and CSS files.
When server.js
first responds, it gets a reference to the correct JS/CSS files and sends that to the HTML template.
Here be a list of funny looking settings that future me may be puzzled by:
- In package.json > tasks,
UV_THREADPOOL_SIZE
in the dev task is because ofhttps://github.com/sass/node-sass/issues/857
.
-
Clean up of the
node_modules
folder (e.g.node-jsx
can go). -
Get the
<title>
working across routes -
Bring in bubble reader, Facebook Slim and cookbox, do they even still work?
-
There is shared logic/loaders/etc. in the two webpack configs, bring this out a config base and import it into the other config files.
-
The arranging of images on load is a bit funky, can I do something here?