huygensing / js-scaffold

A base project

Huygens ING scaffold

todo when starting a project using this scaffold

• ❏ git clone [this repo] [your projectname]

• ❏ git remote rename origin scaffold

• ❏ git remote add origin [where you want to store your code]

• ❏ git push --set-upstream origin master

• ❏ grep -Ri scaffold * and replace it with your project name

• ❏ edit package.json and fill in the administrative fields (name, licence etc.)

• ❏ git commit -am "Start [projectname] using scaffold from [this repo]"

• ❏ git push origin master

• ❏ docker-compose up

• ❏ start hacking :)

vscode configuration

• ❏ install the tslint extension

todo / features

• ✓ uses yarn for npm install so we have less chance of irreproducable bugs between team members

• ✓ buildbase container that contains all packages so we can be certain that a build can still be done 5 years from now.

• ✓ Dockerfile that does not use FROM buildbase and removes node_modules after build so we have a small container

• ✓ put node_modules at the root so everyone uses the same node_modules (without downloading) but we can mount the entire app module and we can override a module if we want to by doing a local npm/yarn install

• ✓ express base site

• ✓ index file that links to the three different js-apps

• ✓ storybook dev middleware
  test: docker-compose up, open browser on http://localhost:8080/build/storybook/ and edit the components/test.story.tsx [← note! typescript] watch if it updates automatically

• ✓ unittest dev middleware (HMR)
  test: docker-compose up, open browser on http://localhost:8080/build/tests.html and edit the actions/theModule.test.ts [← note! typescript] watch if it updates automatically

• ✓ app dev middleware (HMR)
  test: docker-compose up, open browser on http://localhost:8080/build/index.html and edit the actions/theModule.test.ts [← note! typescript] watch if it updates automatically

• ✓ static file serving

• ✓ compilation + prod static file server

• ✓ app

• ✓ Promise

• ✓ typescript

• ✓ polyfill

• ✓ fetch

• ✓ typescript

• ✓ polyfill

• ✓ React + React-dom + Redux

• ✓ typescript

• ✓ static asset

• ✓ HMR (3)

• ✓ compiled

• ✓ proxy through browsersync

  • ✓ with https (and no funky chrome changes because it’s self-signed, document what the user needs to do)

• typescript error report

  • compilation

    • ✓ storybook

    • ✓ unittests

    • ✓ full app

  • hmr

    • ✓ storybook

    • ✓ unittests

    • ✓ full app

• tslint report

  • in vscode

  • compilation

    • ✓ storybook

    • ✓ unittests

    • ✓ full app

  • NOTE: I can’t get hmr reporting (tslint-loader) to work.

• ✓ fast container shutdown

• ✓ ci run on saucelabs

• ✓ fix that node_modules should have parts available outside container and parts inside container (c++ libs should be compiled in container, vscode should be able to reach typings outside container)

• ✓ storybook with knobs

• ✓ storybook alle .story files laten includen

• ❏ storybook with source code shown

• ❏ simple router (test pushState with scroll position)

• ❏ vscode debugger support (chrome)

• ❏ run commands using same userid as host system so that created files get the right owner

production ready

• ❏ remote urls are configured using env-variables

• ❏ can be proxied under subfolder (is configured using env-variable)

  • ❏ test base tag with

    • pushState

    • css urls

    • script urls

    • image urls

    • images/css loaded via react

• caching

  • ❏ js compiled with hash and served with infinite cache header (both in dev and prod mode)

  • ❏ base html knows the hashes and is served with hash based etag

• ❏ https://www.npmjs.com/package/finalhandler

• ❏ log all requests as json to the console in prod mode

Not gonna do for now:

• ❏ debug server from vscode?

• ❏ storybook for user documentation?

• ❏ chrome live edit support?

• ❏ make http:// redirect to https://

• ❏ refresh if storybook config changes

• ❏ refresh if webpack config changes

folder layout

See README’s at lower levels for an explanation of what each folder does.