Typescript Project Demo

Heavily WIP (may be missing some documentation/steps)

This repo is a step by step implementation of a Typescript project and the various benefits therein.

This tutorial aims for a low barrier to entry; it may be quite verbose, the goal is that anyone of any level can learn something from this demo.

A rough project map would include:

• Project Setup
  • Git
    • .gitignore
  • Node
    • package.json
  • Environment Vars
  • Typescript
    • tsconfig
    • tslint
    • ts-node
    • ts-jest
  • Nodemon
  • Testing Framework Configuration using Jest
  • Build Configuration using Webpack
• OOP
  • Interfaces
  • Classes
  • Generics
  • Decorators
• Front End Framework
  • Select one!
    • Vue
      • Using Vue CLI 3
      • pug Templates
      • TypeScript
      • SCSS
      • Vuex
      • Vue Router
      • Kickass Modern Vue Decorator Libraries
        • Vuex-Module-Decorator @championswimmer Revolutionize your life by writing Vuex Modules as Classes instead of JSON
        • Vue-Property-Decorator Revolutionize your Vue experience by writing Vue Classes instead of defining Vue Configurations
    • React ? another day...
  • Redux/Vuex State management
  • Vue-Router/React-Router SPA Routing
• Back End Framework
  • NestJS
    • GraphQL
      • Query
      • Mutation
      • Subscription (Yet todo...)
• Tests
  • Mocking
• Docker
  • Setup
    • dockerfile
    • docker-compose.yaml
  • Usage
    • make
    • docker-compose
  • Database
    • Cassandra (NoSQL)
    • Postgres/MySQL (SQL)
  • Node Microservice
    • NestJS
    • GraphQL
• Front End Testing
• E2E Testing
• Deployment (tbd)

Doc Links

• Project Setup
• TypeScript

Setup the Server

We'll be using NestJS for its amazing CLI, advanced features (GraphQL, etc.), and TypeScript support.

The project has been broken into two distinct codebases to prevent polluting backend/frontend application code:

• The front end application (vue-app), implementing a vue front end with the Vue CLI 3 proxying to the NestJS back end
• The back end application (typescript-api-app), built using NestJS and GraphQL

Frontend Vue Application: vue-app

Within the vue-app/ resides the frontend application which handles the VueJS Application. In development mode it proxies the backend server requests thus allowing the development environment to interact with the back end application and GraphQL.

Running Vue-App

To start the live-reload development environment use:

yarn serve

To build the front end application for production use:

yarn build

Testing Vue-App

todo

Backend NestJS/GraphQL Application: typescript-api-app

Within the typescript-api-app/ resides the backend application which handles all the API requests, and ultimately serving pages.

Running Typescript-Api-App

To start the live-reload development environment use:

yarn start:dev

To start the production server use:

yarn start:prod

Testing Typescript-Api-App

To start the unit tests use:

yarn test

To engage watch mode, and live-restart the tests:

yarn test:watch

To start the E2E tests use:

yarn test:e2e

To engage watch mode, and live-restart the tests:

yarn test:e2e:watch

To run a coverage test use:

yarn test:cov