TypeScript Full Stack project (Part V) - Running the project
TypeScript Full Stack

TypeScript Full Stack project (Part V) - Running the project

Run the whole project and use docker if you want.

TypeScript Full Stack project (Part IV) - Shared Libraries
An advantage to use TypeScript for your entire stack, creating shared libraries for your client and server side.

After read all the previous posts, you will already have all the necessary things to run the project. Now, I am going to explain how to do it.


Run the project

First at all, we need to adapt the base package.json file creating the necessary scripts to build all the parts and run client-side and server-side at the same time.

We are going to create the following script:

  • clean:
    • These scripts will remove all the dev/build files and let the project as new.
  • postintall:
    • These scripts will be necessary to build all the parts, client-side, server-side and shared-libs.
  • start:
    • Finally, these scripts will start the application in a development mode.

At the end, we will have the following package.json file:

{
  "name": "issues",
  "version": "1.0.0",
  "description": "Sample of TypeScript Full Stack project.",
  "scripts": {
    "clean:all": "npm run clean:all:ui && npm run clean:all:server && npm run clean:all:shared-libs && rm -rf node_modules package-lock.json",
    "clean:all:ui": "rm -rf client/node_modules client/package-lock.json",
    "clean:all:server": "rm -rf server/dist server/node_modules server/package-lock.json",
    "clean:all:shared-libs": "rm -rf shared-libs/data-entities/dist shared-libs/data-entities/node_modules shared-libs/data-entities/package-lock.json",
    "postinstall": "npm run postinstall:ui && npm run postinstall:server && npm run postinstall:shared-libs",
    "postinstall:ui": "npm install --prefix ./client",
    "postinstall:server": "npm install --prefix ./server",
    "postinstall:shared-libs": "npm install --prefix ./shared-libs/data-entities",
    "start": "concurrently -n client-side,server-side \"npm run start:ui\" \"npm run start:server\"",
    "start:ui": "npm start --prefix ./client",
    "start:server": "npm start --prefix ./server"
  },
  "keywords": [
    "typescript-full-stack",
    "typescript",
    "angular",
    "nestjs"
  ],
  "author": "David López <davidlopez.david@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "concurrently": "^5.0.0",
    "lice-js": "^0.2.0",
    "prettier": "^1.18.2"
  }
}

Finally, we are already prepared to start our TypeScript Full Stack project. First, you only need to install all the dependencies from the base folder, issues, npm i and after this, execute npm start.


Docker support

These days it is important to have you application in a container. I am going to explain how to add docker support to our project.

First at all, we need to install docker and docker-compose in our computer. The next thing we are going to do is to create the Dockerfiles for our client and server side application. This file indicates docker how to create the container. For quickly creation, I let you the Dockerfiles below and in the repository.

  • Dockerfile for client

For this container, we are going to use the nginx-alpine image to use nginx as a web server.

# Build a small nginx image with static website
FROM nginx:1.16.0-alpine

RUN rm -rf /usr/share/nginx/html/*

COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY dist/issues-ui /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]
  • Dockerfile for server

For this container, we are going to use the node-alpine image to run our NestJS application.

FROM node:12.12.0-alpine

WORKDIR /usr/local/issues-server
COPY dist/ /usr/local/issues-server
COPY src/environment/development.env /usr/local/issues-server/.env
COPY db/ /usr/local/issues-server/db
COPY package.json /usr/local/issues-server
COPY package-lock.json /usr/local/issues-server

RUN npm install

EXPOSE 8000

CMD [ "npm", "run", "start:docker" ]

Once we have these containers, we can run them separately but we want all working together for this reason, we need to create the last docker file: docker-compose.yml.

version: '3.3'
services:
  issues-ui:
    build: ./client/.
    ports:
      - '80:80'
    depends_on:
      - issues-server
    networks:
      - issues

  issues-server:
    build: ./server/.
    ports:
      - '8000:8000'
    networks:
      - issues

networks:
  issues:
    driver: bridge

With this file, we orchestrate both containers to run together in the same machine.

Once the files have been created, we need to adapt all the package.json script to build and run the containers.

For the client, we need to add the following scripts:

{
  ...
  "scripts": {
    "docker:build": "docker build -t issues-ui .",
    "docker:run": "npm run build && npm run docker:build && docker run -p 80:80 --name issues-ui --rm issues-ui",
    ...
  },
  ...
}

For the server, we need to add the following scripts as well:

{
  ...
  "scripts": {
    "build": "nest build",
    "docker:build": "npm run build && docker build -t issues-server .",
    "docker:run": "npm run build && npm run docker:build && docker run -p 3000:3000 --name issues-server --rm issues-server",
    ...
  },
  ...
}

In both cases, we have added the docker:build and docker:run script. The first one compiles the code and builds the container, we will use this script to be used with docker-compose, and the second one also compiles and builds the container and runs the container alone, if you want to try the applications separately, this is your script.

Last but not least, we need to also add some scripts to the base package.json file:

{
  ...
  "scripts": {
    "build:docker": "npm run build:docker:ui && npm run build:docker:server && docker-compose up -d --build",
    "build:docker:ui": "npm run build --prefix ./client",
    "build:docker:server": "npm run build --prefix ./server",
    ...
  },
  ...
}

After this, executing npm run build:docker the docker-compose will be executed and two new containers will be created.

odin@asgard:~/issues $ docker ps
CONTAINER ID        IMAGE                  COMMAND                  CREATED             STATUS              PORTS                    NAMES
78f0f2f5b0bb        issues_issues-ui       "nginx -g 'daemon of…"   10 seconds ago      Up 9 seconds        0.0.0.0:80->80/tcp       issues_issues-ui_1
eb6e36259429        issues_issues-server   "docker-entrypoint.s…"   12 seconds ago      Up 10 seconds       0.0.0.0:8000->8000/tcp   issues_issues-server_1

And if you open http://localhost, the application will be opened.


To remove the containers you only need to executes docker-compose down -v.


If you have read all the posts, you will have an example of TypeScript Full Stack project. I hope you have enjoyed the posts. If you have questions or find any issue in the code, I would like to you created a Github issue with your comments. Enjoy!


Finally, I let you the link to read all the post series.

TypeScript Full Stack
TypeScript for all your platform building an Angular application for the client-side and using NestJS framework to build the server-side.

Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to YggdrasilTS
Great! Next, complete checkout for full access to YggdrasilTS
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.