Initial development setup on the git repository.
Next there is the outline of things to do. If you create subtasks for something, link it on the appropriate bullet point.
* [] Initialize git repo
* [] .gitignore for node projects and dist/ folder
* [] package.json with name, description, etc
* [] Initial README.md version
* [] Docs folder with a changelog
* [] Setup server entry point
* [] src/server/index.js
* Dummy node server that runs on env PORT || 3000 and always responds with a string
* Use express for easier integration with service-runner later
* [] Setup npm scripts in package.json
* start: starts server/index in development mode (NODE_ENV=development) with auto restart (something like nodemon)
* [] Update README documenting the npm scripts
* [] Setup client entrypoint
* [] src/client/index.js
* Dummy browser file with a console.log
* [] Setup webpack to compile to dist/ in a build npm script
* Output file name with hash (chunkhash)
* [] Change server/index to serve static assets from dist/ (express.static)
* [] Add src/server/template/layout.ejs that generates the base HTML
* See express view engines
* Run it on the route /
* Use a HTML5 structure and include the compiled bundle
* We probably need to generate and read the webpack manifest to know the compiled name to serve
* [] Server restarts after changes to .js or the ejs templates on npm start
* [] Set up test framework
* See what the services team and reading infrastructure are using, and set it up. I believe it is mocha + sinon
* [] scripts
* test = runs tests in test/ and src/**/*.test.js
* test:watch = runs test watching files and re-running on change
* [] Setup linting and code formatting
* Set up code formatting with prettier and linting with eslint
* [] scripts
* lint = runs eslint with our config file on all js & json files (src & test)
* format = formats all js & json sources
* [] eslint
* Add .eslintrc.yml
* Extend wikimedia/eslint-config-node-services
* Extend eslint-config-prettier last to disable aesthetic rules
* [] prettier
* Configure flags to be similar to eslint-config-node-services (regarding quote style and tab/spaces)
* [] Setup git hooks
* Set up git hooks for validating & formatting code pre-commit using husky
* [] Setup a [husky](https://github.com/typicode/husky) pre-commit hook that runs lint & test
* [] Set up formatting of staged files https://github.com/prettier/prettier#pre-commit-hook
* [] Spike: Webpack target:node or hacking require extensions in node
* What is easier, using webpack with both target:node and web, or using just webpack target:web and hacking require extensions for the node server (babel-node/babel-register + babel transpiling for prod)?
* Calypso uses webpack with target: node.
* [] Setup es5 transpiler for the client
* Using babel, babel-preset-env, see inspiration: [1](https://github.com/joakin/universal-webpack-code-splitting), [2](https://github.com/developit/preact-cli/blob/master/src/lib/babel-config.js#L4).
* [] Setup babel
* with babel-preset-env with the browsers we target specified
* with babel-transform-object-assign
* with [jsx support for preact](https://github.com/developit/preact-cli/blob/master/src/lib/babel-config.js#L23-L24)
* [] Change npm start to run complation steps
* [] Add the babel loader to the client side compilation on webpack
* [] Set up server side transpiler for consuming client code
* Like the client transforms but targeting node instead of browsers
* Only for files loaded from src/client/
* [] Setup base CSS support
* Importing a CSS file should apply the styles to the served site.
* The server shouldn’t fail if requiring a client file that requires CSS files
* With the client config, use style loader in development
* [] Setup production mode
* Set up npm run build which compiles the server and client in production mode
* [] With process.env.NODE_ENV === “production”
* [] Runs webpack with minification, and process.env.NODE_ENV defined
* Compiles CSS to .css files using ExtractTextPlugin instead of style-loader
* [] Compiles the src code to be able to run the server on raw node 6 (jsx transforms + object-assign)
* [] Update README with instructions for building and running the production server
* [] Setup integration testing tooling
* Integration testing, using plain webdriver.io setup
* [] Set up selenium server, and webdriver
* [] Add an initial test
* [] Add script “browser-tests” that run the tests
* [] Update README docs