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 Workflow 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 autoprefixer 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 5.