This repository has been archived to make way for react-starter-kit

web-starterkit

Template project to kickstart new web projects

About This Repository

I created this repository to serve as a starter kit to assist me in kickstarting new web app projects without the need of building from scratch or depend on various plugins/projects that use CLI commands.

Feel free to post issues or raise PRs if you found any bugs or areas that require improvement.

Pre-requisites

• Node.js v8.9.3 and above must be installed.
• Recommended to use yarn as package manager

Getting Started

1. Copy dotenv file from /deploy/local folder into project root folder and rename to .env
2. yarn install or npm install
3. npm run dev:server
4. Open http://localhost:6150 in web browser

Features

• Powered by Node.js v8 + Koa v2
• UI rendered by React v16 + react-router-redux
• Based CSS styles provided by Milligram CSS
• styled-components for styling React components
• Server-side rendering
• Server-side rendered styles (via styled-components)
• Webpack for bundling front-end Javascript code
• Webpack hot module replacement + Koa HMR middlewares for instant review of changes without the need to constantly reload app
• Automatic Node.js app rebooting via Nodemon
• Eslint for code consistency and encourage better code writing styles
• Responsive components styled using styled-components
• Progressive web app (PWA)
• Tests *Coming soon*
• Vendor JS bundle for all third-party JS libraries
• Production ready bundles
• Gzipped bundles
• Helmet via koa-helmet
• CSRF protection via koa-csrf
• Better handling of custom fonts *Coming soon*
• Localization *Coming soon*
• Async redux action via redux-thunk
• Asynchronous module loading via Webpack code splitting + react-async-components

Preparing For Production Deployment

1. Make sure the following set of commands are included in your deployment script
   • cp ./deploy/production/dotenv .env
   • yarn install or npm install
   • npm run build
2. npm run build generates production-ready versions of Javascript bundles used by front-end app, and related static assets into the /dist/assets folder. You should come up with your own post-deployment strategy to copy/move the files into appropriate storage locations and update your app code accordingly.

Wishlist

• Hosted demo app
• Cached server-side rendering
• React UI testing with Enzyme
• Accelerated Mobile Pages (AMP)

Useful Visual Studio Code Plugins

• ESLint
• Git Lens
• Node.js Extension Pack
• Prettier - Code formatter
• Auto Close Tag
• Auto Rename Tag

Necessary VS Code Configurations

Note that you might want those settings to be added in the workspace settings and not globally. (espeically the editor.formatOnSave part)

// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
"editor.formatOnSave": true,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
"editor.tabSize": 2,