TypeScript + Express + ejs + Node.js Starter with bulma.io

TypeScript Express ejs template starter using Microsoft's TypeScript-Node-Starter.

include bulma.io (open source CSS framework).

Pre-reqs

To build and run this app locally you will need a few things:

• Install Node.js
• Install IDE or editor

Getting started

• Download the repository

• Install dependencies

npm install

• Build and run the project

npm run build
npm start

Finally, navigate to http://localhost:3000 and you should see the template being served and rendered locally!

Deploying the app

Build the app

• execute npm run build from a terminal window

Project Structure

The most obvious difference in a TypeScript + Node project is the folder structure. In a TypeScript project, it's best to have separate source and distributable files. TypeScript (.ts) files live in your src folder and after compilation are output as JavaScript (.js) in the dist folder. The test and views folders remain top level as expected.

The full folder structure of this app is explained below:

Note! Make sure you have already built the app using npm run build

Name	Description
.vscode	Contains VS Code specific settings
dist	Contains the distributable (or output) from your TypeScript build. This is the code you ship
node_modules	Contains all your npm dependencies
src	Contains your source code that will be compiled to the dist dir
src/controllers	Controllers define functions that respond to various http requests
src/public	Static assets that will be used client side
src/server.ts	Entry point to your express app
test	Contains your tests. Seperate from source because there is a different build process.
views	Views define how your app renders on the client. In this case we're using pug
.travis.yml	Used to configure Travis CI build
.copyStaticAssets.ts	Build script that copies images, fonts, and JS libs to the dist folder
jest.config.js	Used to configure Jest
package.json	File that contains npm dependencies as well as build scripts
tsconfig.json	Config settings for compiling server code written in TypeScript
tslint.json	Config settings for TSLint code style checking

Running the build

All the different build steps are orchestrated via npm scripts. Npm scripts basically allow us to call (and chain) terminal commands via npm. This is nice because most JavaScript tools have easy to use command line utilities allowing us to not need grunt or gulp to manage our builds. If you open package.json, you will see a scripts section with all the different scripts you can call. To call a script, simply run npm run <script-name> from the command line. You'll notice that npm scripts can call each other which makes it easy to compose complex builds out of simple individual build scripts. Below is a list of all the scripts this template has available:

Npm Script	Description
start	Does the same as 'npm run serve'. Can be invoked with npm start
build	Full build. Runs ALL build tasks (build-sass, build-ts, tslint, copy-static-assets)
serve	Runs node on dist/server.js which is the apps entry point
test	Runs tests using Jest test runner
tslint	Runs TSLint on project files

Running tests

Simply run npm run test. Note this will also generate a coverage report.

Running TSLint

npm run build   // runs full build including TSLint
npm run tslint  // runs only TSLint

Hackathon Starter Project

A majority of this quick start's content was inspired or adapted from Sahat's excellent Hackathon Starter project.