TODO

1. Update sitemap to add pages with unique ID
2. Css modules - variable and global stuffs
3. Create sitemap.xml and register that with google https://www.youtube.com/watch?v=xtoAfUB6Ubw
4. Read up on critical rendering path on udacity
5. keep alive
6. Rendering performance reflow
7. deploy to netlify

Cool stuffs

1. css modules using react-css-modules. By using css module we can also hash the css names
2. Meta for discovery using Open Graph protocol (meta tag with og scheme)
3. Code and CSS splitting
4. Getting react library via CDN helps in minimising bundle size. Set react and react-dom as externals in webpack config
5. Webpack path alias and additional configuration for Typescript
6. Pre-rendering using puppeteer
   • There are additional steps that have to be wired together:
     1. Start application after bundling
     2. pre-render pages
     3. Add them to build folder
7. Isomorphic rendering is achieved for production
   1. When building for production, prerender-xs is used to generate index.html for all routes
   2. Pre-rendered contents of build folder will be served by express located in test-server folder or simply by running npm run deploy:express
   3. Note that this is isomorphic rendering which means that after an index.html is served for a particular route any other react-router navigation using <Link> component remains as client-side-routing
8. Mock api is configured in webpack.dev.ts using connect-api-mocker package
   1. Configure webpack-dev-server in webpack.dev.ts to serve mock API
   2. Make sure mocks are available. Look at JsonPlaceholderApi.ts to see how is it set up.
   3. Switch between mock and non-mock mode in configs.ts
9. Deployment to netlify is possible by running npm run deploy:netlify after installing netlify-cli npm package
10. Sitemap will be automatically generated based on routes defined for react-router in routes.ts
    • You can add your sitemap to google here
    • You can manage your domain's indexing here

SEO

1. Sitemap.xml can be added to robot.txt
2. How to SEO
   • hashbang (Deprecated)
   • SSR vs pre-render with multiple library/frameoworks

Optimization

Resource

1. Excellent SPA SEO article #1

Gotchas

1. When trying to code-split Typescript there it's necessary to set module to esnext in tsconfig.json. If you're using typescript webpack configuration there will be extra steps that needs to be taken. That's to:
   • install cross-env
   • add tsconfig.webpack.json so that webpack configuration doesn't get read as esnext modules
   • add TS_NODE_PROJECT=tsconfig.webpack.json to npm run scripts