A Modern Javascript Sta1c Site Visual Architecture

A Modern JavaScript Sta1c Site Visual Architecture

“Sta%c” websites - websites without a server - are a great way to jump into JavaScript and deploy an app without worrying about hos%ng costs, server up%me, or databases.

They are simpler than sites with a server, but that doesn’t mean they are simple.

What follows are diagrams of a concrete example of ONE POSSIBLE architecture for a modern sta%c JavaScript web site. I believe the architecture shown is minimal yet func%onal.

Developer Workflow ...... 1

Bundle ...... 2

Deploy ...... 3

Live ...... 4

Sample ...... 5 Developer Workﬂow

Webpack rebuilds as you work. webpack-dev-middleware is used with Express to serve the latest bundle to your browser.

See p. 2 for deats

HTML

Webpack

File webpack-dev-middleware Changes Express

Text Editor Browser

Developer (you!)

1 Bundle

One of many ways to bundle client-side JavaScript.

npm packages Project Files

React ...

MULTIPLE FILES ES6 CSS SUPERSET MULTIPLE FILES

babel-loader Webpack css-loader ES6 postcss-loader ES5 CSS SUPERSET style-loader Babel CSS

Plugins PostCSS preset-es2015 Plugins preset-react autopreﬁxer

No Production? Yes

output ExtractTextPlugin

SourceMapDevToolPlugin

SINGLE ES5 FILE UglifyJsPlugin MINIFIED CSS FILE CSS INCLUDED ES5 FILE AS STRING

2 Deploy

First bundle in produc0on mode, then upload using the gh-pages npm package.

See p. 2 for deats

HTML

Webpack

MINIFIED MINIFIED ES5 FILE CSS FILE

gh-pages

VARIATION Use AWS S3 instead. GitHub Pages

3 Live

Users visit your web site. Their browser downloads your sta5c assets from GitHub Pages.

GitHub Pages

HTML

Browsers

Users

4 Sample

Want to start with a codebase that follows these diagrams exactly?

Try out the emoji-search sample React app.

Demo https://ahfarmer.github.io/emoji-search/

Code https://github.com/ahfarmer/emoji-search