Change Details

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 * [] 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 ...

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 * [] 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 transpilation * 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 .babelrc * 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 with babel-node or babel-register so that the server can import files on the client folder * [] Add the babel loader to the client side compilation on webpack /.../

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 * [] 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 transpilation * 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 .babelrc * 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 with babel-node or babel-register so that the server can import files on the client folder * [] Add the babel loader to the client side compilation on webpack /.../