README

What is this repository for?

Front End code repo for Adroit Site Generator kit

Prerequisites

• Node v8.3.0
• NPM v5.6.0

Technologies

The client side application is comprised of the following technologies:

For generating Static Markup - AEM Components on Server Side

• Handlebars
• Assemble

For Client Side

• ReactJS
• Redux
• React-Router

Build Tools, Transpiler & Package Manager

• Babel
• Webpack
• Gulp - Only for Assemble.io plugin as that is not available in Webpack
• NPM

Developer Tools

VS Code

Visual Studio Code is a free code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code - User Preference

{
	"editor.formatOnSave": true,
	"[handlebars]": {
		"editor.formatOnSave": false
	},
	"editor.renderWhitespace": "all"
}

VS Code Plugins

• Editor Config
• Prettier - Code formatter
• JavaScript ESLint
• SASS linter

Getting Started - Code & Environment - Setup

• Go to the root folder (where package.json is available) and run the following command:s

$ npm install

• Go to the root folder and then to generators folder (where package.json is available) and run the following command:s

$ npm install

• Go back to the root folder and then run below command to start the server:

$ npm start

Create FE Components

Please use the below command to create any new command:

$ node generators --name <component-name> --dir <director name>

How to Build & Run

Build application for Dev Env and runs webpack-dev-server

npm run web

Linting JavaScript code from command line

npm run lint

Build & Analyse the Webpack Build

npm run build:analyse

Simulate Prod Server: To avoid webpack-dev-server [publicPath & assets issue] after deployment

npm run serve