<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ReMa</title>
    <description>The latest articles on DEV Community by ReMa (@_rema_lp).</description>
    <link>https://dev.to/_rema_lp</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F113737%2F70c39c0e-e53c-42ea-8583-124c8064accc.jpg</url>
      <title>DEV Community: ReMa</title>
      <link>https://dev.to/_rema_lp</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/_rema_lp"/>
    <language>en</language>
    <item>
      <title>Debugging Nest.js (TypeScript) in a Docker Container</title>
      <dc:creator>ReMa</dc:creator>
      <pubDate>Sun, 11 Nov 2018 03:44:28 +0000</pubDate>
      <link>https://dev.to/_rema_lp/debugging-nestjs-typescript-in-a-docker-container-19a3</link>
      <guid>https://dev.to/_rema_lp/debugging-nestjs-typescript-in-a-docker-container-19a3</guid>
      <description>&lt;h1&gt;
  
  
  Debugging Nest.js in a Docker Container
&lt;/h1&gt;

&lt;p&gt;This recipe shows how to run and debug a VS Code &lt;a href="https://nestjs.com/" rel="noopener noreferrer"&gt;Nest.js&lt;/a&gt;, Full Stack TypeScript Framework, project in a Docker container.&lt;/p&gt;

&lt;p&gt;The recipe assumes that you have a recent version of Docker installed.&lt;/p&gt;

&lt;p&gt;Here is &lt;a href="https://github.com/rema424/nestjs-docker-vscode-debugging" rel="noopener noreferrer"&gt;repository&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1. Create a New App
&lt;/h2&gt;

&lt;p&gt;With the following commands, create the directory (&lt;code&gt;nest-js-app&lt;/code&gt;) and files for the app.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ mkdir nest-js-app &amp;amp;&amp;amp; cd nest-js-app
$ touch Dockerfile docker-compose.yml .dockerignore .gitignore
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The app directory structure should be:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;- nest-js-app
    - .dockerignore
    - .gitignore
    - docker-compose.yml
    - Dockerfile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the following to the &lt;code&gt;Dockerfile&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FROM node:8.10.0

RUN mkdir -p /nest
ADD . /nest
WORKDIR /nest

RUN npm i -g @nestjs/cli
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the following to the &lt;code&gt;docker-compose.yml&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;version: "3"

services:
  nest:
    build: .
    volumes:
      - .:/nest
    ports:
      - 3000:3000
      - 9229:9229
    tty: true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the following to the &lt;code&gt;.gitignore&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Coverage directory used by tools like istanbul
coverage

# Dependency directories
node_modules/

# Output files
dist

# dotenv environment variables file
.env
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the following to the &lt;code&gt;.dockerignore&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.git
.github
.vscode
coverage
docker-compose.yml
README.md

# Node Files #
node_modules
npm-debug.log
npm-debug.log.*
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Build docker image:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker-compose build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start and login to the container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;$ docker-compose up -d
$ docker-compose exec nest bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Scaffold the base project with the &lt;code&gt;Nest CLI&lt;/code&gt; and install dependencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# nest new .
# npm install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run the app:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# npm start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Open a browser and navigate to &lt;code&gt;http://localhost:3000&lt;/code&gt;.&lt;br&gt;
You should see the &lt;code&gt;Hello world!&lt;/code&gt; message.&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 2. Set up the debugging environment
&lt;/h2&gt;

&lt;p&gt;With the following commands, create the directory (&lt;code&gt;.vscode&lt;/code&gt;) and files for debugging.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# mkdir .vscode &amp;amp;&amp;amp; touch .vscode/launch.json nodemon-docker-debug.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The app directory structure should be:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcxa3hz2zeqbuopxhryiu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcxa3hz2zeqbuopxhryiu.png" alt="スクリーンショット 2018-11-11 5.03.17.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Add the following to the &lt;code&gt;launch.json&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker: Attach to Node",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "address": "localhost",
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/nest",
      "protocol": "inspector",
      "restart": true
    }
  ]
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the following to the &lt;code&gt;nodemon-docker-debug.json&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "tsc &amp;amp;&amp;amp; node --inspect=0.0.0.0 ./dist/main.js"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add the following line into the scripts block of the &lt;code&gt;package.json&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"scripts": {
  "debug": "nodemon -L --config nodemon-docker-debug.json",

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Step 3. Debugging
&lt;/h2&gt;

&lt;p&gt;For the test operation, add some codes into the &lt;code&gt;src/app.service.ts&lt;/code&gt; and set breakpoints as below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw46dpkeb12rf0aekei1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcw46dpkeb12rf0aekei1.png" alt="スクリーンショット 2018-11-11 4.39.50.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Run the app in debugging mode:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# npm run debug
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsadehbgil7czo22vfaj4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsadehbgil7czo22vfaj4.png" alt="スクリーンショット 2018-11-11 11.52.41.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Start the debug on the VScode.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F49yeqr6mgsfq777i84rm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F49yeqr6mgsfq777i84rm.png" alt="スクリーンショット 2018-11-11 4.44.01.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Open a browser and navigate to &lt;code&gt;http://localhost:3000&lt;/code&gt;.&lt;br&gt;
You should see the program stop at the breakpoints.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F392d44vnnkqrmbgk93x8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F392d44vnnkqrmbgk93x8.png" alt="スクリーンショット 2018-11-11 4.52.37.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Happy coding!&lt;/p&gt;

&lt;h1&gt;
  
  
  Reference
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://github.com/Microsoft/vscode-recipes/tree/master/Docker-TypeScript" rel="noopener noreferrer"&gt;Debugging TypeScript in a Docker Container&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/remy/nodemon#nodemon" rel="noopener noreferrer"&gt;nodemon&lt;/a&gt;&lt;br&gt;
&lt;a href="https://stackoverflow.com/questions/38276862/is-there-a-way-to-use-npm-scripts-to-run-tsc-watch-nodemon-watch/38695935#38695935" rel="noopener noreferrer"&gt;Is there a way to use npm scripts to run tsc -watch &amp;amp;&amp;amp; nodemon --watch?&lt;br&gt;
&lt;/a&gt;&lt;/p&gt;

</description>
      <category>nestjs</category>
      <category>vscode</category>
      <category>docker</category>
      <category>debug</category>
    </item>
  </channel>
</rss>
