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
- Git
- 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...
- Vue
- Redux/Vuex State management
- Vue-Router/React-Router SPA Routing
- Select one!
- Back End Framework
- NestJS
- GraphQL
- Query
- Mutation
- Subscription (Yet todo...)
- GraphQL
- NestJS
- Tests
- Mocking
- Docker
- Setup
-
dockerfile
-
docker-compose.yaml
-
- Usage
-
make
-
docker-compose
-
- Database
- Cassandra (NoSQL)
- Postgres/MySQL (SQL)
- Node Microservice
- NestJS
- GraphQL
- Setup
- Front End Testing
- E2E Testing
- Deployment (tbd)
Doc Links
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
vue-app
Frontend Vue Application: 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
typescript-api-app
Backend NestJS/GraphQL Application: 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