This application is intended as a toolkit for the Node.js hosting platform. It includes a considerable amount of standard build tools and core configuration.
- Install node.js
- Run
npm install - To build the development app:
npm start - To build the development app:
npm run build
If you ran npm start for development, you will see:
- A toolbar signifying you built for development
- The rendered API data from the mock json file
- A link to toggle the variables stored in
process.env
If you ran npm run build for production, you will see:
- A toolbar signifying you built for production
- The rendered API data from the external API endpoint
- A link to toggle the variables stored in
process.env
When printing output to the node, the buildScripts/devMessage.js file and other build scripts are using both the chalk module to format console. messages. Since the linting settings for .eslintrc.json is set to warn against console.log, we use the command /*eslint-disable no-console*/ to skip warnings.
The npm script for security initiates the nsp check from the nsp module. This check is included within the npm start command to check for security issues as part of the local build.
Transpiling for ES6 is accomplished with the babel-node package. This is then designated by prefixing build scripts with babel-node for npm commands.
The npm script sass compiles uses the node-sass module. The src/sass folder contain the sass files. The main.scss file serves as the manifest file and contains the imports for the sub-directories. The final CSS is compiled into the main.css files, with Webpack using the dev file webpack.config.dev.js to bundle and incorporate the sourcemaps.
The npm script build-dev initiates the buildScripts/srcServer.js which uses express.js to create the homepage at http://localhost:4200. This script serves as the central location for routing and incorporating other centralized web tasks as well.
JavaScript code linting is provided by the eslint-watch module and is called with the esw command and targeted for development or production using the appropriate webpack config: webpack.config.*. The development standards are matching according .eslintrc.json file. During local dev builds, the linting is watching the core JS pipelines.
The Mocha test framework to target unit testing with Chai as the assertion library. The testSetup.js build script first sets up initial adjustments by compiling with Babel and skipping CSS validation. The test files are targeted according to the *.test.js naming convention, rather than by a specific folder when watching the files.
Initial mock APIs are included by default and switch based on environment variables. The initial generate-mock-data fires the generateMockData.js build script. This build script uses the module json-schema-faker and the build script mockDataSchema.js. A file is then generated to /src/api/db.json to emulate as a API call for dev tasks. A new file is created each time npm start is ran. Other common operations are included in the /src/api/ folder, such as deleting records for the development file. The start-mockapi tasks then uses the json-server module to serve the localhost:4201/users endpoint for consumption. For production builds, the API location switches to an external API url to emulate a real API call.
For the sake of testing, node processes which are stored in process.env are exposed in runtime by webpack by the DefinePlugin value which is exported for switch statements in the DOM. These currently are passed thru the NPM commands as NODE_ENV= for development or production.
The continuous integration is validated thru TravisCI as part of the normal github workflow. The local storage reference for TravisCI is stored in the .travis.yml file.
The npm run build starts the process of a deployment build. This starts by cleaning dist/ folder in the clean-dist command as part of the prebuild command. The subsequent tasks then include build and postbuild commands which follow the normal methods or compiling thru express and bundled with the production webpack file webpack.config.prod.js The webpack settings for production include specific tasks such as bundle splitting, cache bustings, and compression.
This starter-kit utilizes NPM scripts in the packages.json file for workflow items. These scripts run implicit commands from the file, but also reference build scripts located in “buildScripts/”.
prestartruns creates a dev message to your terminalnpm startruns in parallel with the codenpm-run-all --parallela collection of commandssecurity-checkmodule security scan for packagesbuild-sasscompiles and watches for sass changes to cssbuild-devfires build tasks with stands up the local websiteenv-detectutility build tasks for delineating between dev and prodlint:watchlinting by firinglintand appends the command with an additionalwatchparameter using--test:watch- runs tests by firingtestand appends the command with an additionalwatchparameter using--generate-mock-datastarts process of creating mock data for the APIprestart-mockapirunsgenerate-mock-dataas pre-taskstart-mockapistarts thejson-serverand points to the local db.json file
clean-distclear out existing/distfolderprebuildpreparation tasks around messaging, testing dev code, and lintingbuildbuild tasks to prepare deployment code structurepostbuildserving up local assets thru completed codebasedeployempty and waiting on TODO