Full-stack TypeScript environment: Vue.js, ExpressJS, Node.js, and MongoDB. MEAN but with Vue (MEVN).
- Visual Studio Code - Recommended
- Git
- Node.js
- MongoDB - Install and run MongoDB, making sure it is running on the default port (27017)
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 |
| client | Where the Vue.js client lives |
| 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/config | Passport authentication strategies and login middleware. Add other complex config code here |
| src/controllers | Controllers define functions that respond to various http requests |
| src/models | Models define Mongoose schemas that will be used in storing and retrieving data from MongoDB |
| src/public | Static assets that will be used client side |
| src/types | Holds .d.ts files not found on DefinitelyTyped. |
| src/server.ts | Entry point to your express app |
| test | Contains your tests. Separate from source because there is a different build process. |
| views | Views define how your app renders on the client. |
| .env.example | API keys, tokens, passwords, database URI. |
| .eslintignore | Config settings for paths to exclude from linting |
| .eslintrc.js | Config settings for ESLint code style checking |
| .prettierrc.js | Config settings for Prettier |
| .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 running tests written in TypeScript |
| package.json | File that contains npm dependencies as well as build scripts |
| tsconfig.json | Config settings for compiling server code written in TypeScript |
| vue.config.js | Config settings vue-cli |
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 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, lint, copy-static-assets) |
serve |
Runs node on dist/server.js which is the apps entry point |
watch-node |
Runs node with nodemon so the process restarts if it crashes. Used in the main watch task |
watch |
Runs all watch tasks (TypeScript, Sass, Node). Use this if you're not touching static assets. |
test |
Runs tests using Jest test runner |
watch-test |
Runs tests in watch mode |
build-ts |
Compiles all source .ts files to .js files in the dist folder |
watch-ts |
Same as build-ts but continuously watches .ts files and re-compiles when needed |
build-sass |
Compiles all .scss files to .css files |
watch-sass |
Same as build-sass but continuously watches .scss files and re-compiles when needed |
lint |
Runs ESLint on project files |
copy-static-assets |
Calls script that copies JS libs, fonts, and images to dist directory |
debug |
Performs a full build and then serves the app in watch mode |
serve-debug |
Runs the app with the --inspect flag |
watch-debug |
The same as watch but includes the --inspect flag so you can attach a debugger |
Simply run npm run test.
Note this will also generate a coverage report.
This project is derivived from TypeScript-Node-Starter by Microsoft. Licensed under the MIT License.