The MakeHaus JS Development Environment

Prerequisites

This documentation assumes that you are at least fundamentally familiar with the following tools and that they are installed on your system, if applicable:

git
Bash / command prompt

Any commands below must be run from the project’s working directory unless otherwise specified.

For all npm commands, depending on local permissions and your operating system, you may have to execute with elevated privileges (sudo npm ...)

Standard Javascript/Typescript Development Environment

All javascript/typescript packages have been developed using the following tools wherever relevant:

VSCode
node.js version 12
Typescript 3.6.x
Rollup 1.31.x

Initial Setup For Typescript Based Projects

Typescript Basics

Typescript files (.ts) have to be compiled to javascript before they can be run inside the node js runtime. In makehaus-js, the dist/ folder is the designated build folder and should not be checked into the cloud repository.

Although Typescript has been included as a development dependency in all typescript based projects, it is highly advised to install typescript at a global level on your development machine. Read the instructions here on how to do this.

Javascript modules can be of several different formats, but the ones which are relevant to makehaus-js are “commonjs” and “es6”. These module formats can be toggled in the tsconfig.json file in the “module” section. Due to several reasons outside the scope of this document, please ensure the following:

During development, the module format to be used must be “commonjs”
Before making a production deployment, the module format to be used must be “es6”

Once you’ve ensured that the module format specified is commonjs, execute the following command:

tsc -p

This will compile all typescript source files to javascript and place the compiled form into the dist/ folder.

Typical Development Workflow For Typescript Projects

With every change made to typescript files, they have to be compiled to javascript. The typescript package has a watcher argument which makes it easy to do this. Before beginning your development session, execute the following command:

tsc -w

Now, you no longer need to keep calling the typescript compiler after every change you make.

Prettier is a code formatting plugin. makehaus-js uses the prettier.config.js to specify code formatting rules. It is highly recommended to install the Prettier extension by Esben Petersen to leverage the prettier config file included in the repository.
Breakpoint debugging is possible by adding breakpoints to your typescript files directly.

Deployment For Typescript Projects

Rollup is a popular module bundler for node js packages and all typescript packages described here use rollup for their primary building needs. Although the rollup command has been used by all the build related scripts, it is highly recommended to install rollup globally by executing:

npm install -g rollup

Making A Standalone Build

To make a standalone build, run the following command:

npm run build

Rollup will do all the bundling and packaging in this step.

Publishing A New Version

Before publishing a new version:

Ensure that the “module” section of the tsconfig.json file has been set to “es6”. If not, rollup will complain about the same.
Delete the dist/ folder to have a clean workspace.
Update the package version in package.json, otherwise npm will complain about an already existing version in its package repository.

Now execute:

npm login

This will prompt you to enter credentials for the npm account you wish to publish to. Once you’ve logged in, execute:

npm publish

This will create a new standalone build and deploy the bundled npm package to the npm registry under your account.