chaituknag / adroit

README

What is this repository for?

Code repo for Adroit Framework

Prerequisites

• Node v8.3.0 +
• NPM v5.6.0 +

Technologies

The client side application is comprised of the following technologies:

For generating Static Markup on Server Side

• Handlebars Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

• Assemble More than 130 Handlebars helpers in ~20 categories. Helpers can be used with Assemble, Generate, Verb, Ghost, webpack-handlebars, gulp-handlebars, grunt-handlebars, consolidate, or any node.js/Handlebars project.

HTML, CSS and JavaScript

• BEM - Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development (http://getbem.com/)
• SASS - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world (https://sass-lang.com/)
• JavaScript - We used Flux architecture which was developed by facebook developers. Facebook uses flux for building client-side web applications. (https://facebook.github.io/flux/)

Build Tools, Transpiler & Package Manager

• Babel
• 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