TypeScript Express ejs template starter using Microsoft's TypeScript-Node-Starter.
include bulma.io (open source CSS framework).
To build and run this app locally you will need a few things:
- Install Node.js
- Install IDE or editor
-
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!
- execute
npm run buildfrom a terminal window
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 |
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 |
Simply run npm run test.
Note this will also generate a coverage report.
npm run build // runs full build including TSLint
npm run tslint // runs only TSLint
A majority of this quick start's content was inspired or adapted from Sahat's excellent Hackathon Starter project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent