NestJs doesn't hot reload work in inside Docker - node.js

Minimum reproduction code
sample code
Steps to reproduce
npm install
docker compose up
Expected behavior
wait for the docker container to be created and run nest, modify the main.ts file, the nest listener does not perform hot reloading
package.json
"dependencies": {
"#nestjs/common": "^9.0.0",
"#nestjs/core": "^9.0.0",
"#nestjs/platform-express": "^9.0.0",
"reflect-metadata": "^0.1.13",
"rxjs": "^7.2.0"
},
"devDependencies": {
"#nestjs/cli": "^9.0.0",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#types/express": "^4.17.13",
"#types/jest": "29.2.4",
"#types/node": "18.11.18",
"#types/supertest": "^2.0.11",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"#typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "29.3.1",
"prettier": "^2.3.2",
"source-map-support": "^0.5.20",
"supertest": "^6.1.3",
"ts-jest": "29.0.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "4.1.1",
"typescript": "^4.7.4"
}
Dockerfile
###################
# BUILD FOR LOCAL DEVELOPMENT
###################
FROM node:18-alpine As development
WORKDIR /usr/src/app
COPY --chown=node:node package*.json ./
RUN npm ci
COPY --chown=node:node . .
USER node
docker-compose.yml
version: '2.13.0'
services:
api:
build:
dockerfile: Dockerfile
context: .
# Only will build development stage from our dockerfile
target: development
volumes:
- .:/usr/src/app
- /usr/src/app/node_modules
# Run in dev Mode: npm run start:dev
command: npm run start:dev
ports:
- 3000:3000
use the listening mode in the docker container, and bind the volume, but modify the file under src, nest does not perform hot reload

Related

Docker-Compose fail

I'm working with docker, docker-compose, trying to create an image but I'm getting an issue that I can't fix, I have tried a lot of ways but nothing seems to work, this configuration for my image, this is my docker file
FROM node:16-alpine#sha256:53ebfa5e6df1e458b47f677cb4f6fd3cf1d079083647dc40d182910a57b5a63d
RUN apk add dumb-init
ENV PORT=443
ENV NODE_ENV=development
ENV DBUSER=user
ENV DBPASS=pass
WORKDIR /app
COPY --chown=node:node . /app
RUN npm ci --only=prod
USER node
CMD ["dumb-init", "node", "/app/index.js"]
And my docker-compose.yaml looks like this:
version: '1.7'
services:
web:
build:
context: .
dockerfile: ./Dockerfile.web
ports:
- "9000:443"
extra_hosts:
"host.docker.internal": host-gateway
.dockerignore:
Dockerfile*
install.sh
README.md
docs/
dev/
var/db/
var/db.tar.gz
node_modules
npm-debug.log
.dockerignore
.git
.gitignore
.npmrc
package.json
"dependencies": {
"#peculiar/webcrypto": "^1.1.7",
"bcrypt": "^5.0.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"fs": "0.0.1-security",
"fs.promises": "^0.1.2",
"https": "^1.0.0",
"rethinkdb": "^2.4.2",
"uuid": "^8.3.2",
"ws": "^8.2.2"
},
"devDependencies": {
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"lint-staged": "^12.3.3",
"prettier": "^2.5.1"
},
And this is the error that I'm getting when I run docker-compose build:

sh: 1: nodemon: not found on Docker compose

I am having serious issues setting up docker. When I run sudo docker-compose up -d and sudo docker-compose logs -f my app is logging sh: 1: nodemon: not found over and over again. The problem is that I don't even have nodemon anymore : /
If I run the exact same project with npm start and manually turn on mysql it works.
My dockerfile:
FROM node:latest
# Create app directory
WORKDIR ./
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm#5+)
COPY package*.json ./
#WORKDIR /node_modules
RUN npm ci --only=production
RUN npm install
# Bundle app source
COPY . .
EXPOSE 8003
CMD [ "npm", "start" ]
My package.json:
{
"name": "name",
"version": "6.4",
"description": "sdasdsadsad",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node --inspect=0.0.0.0 app.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.25.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.4.5",
"dotenv": "^10.0.0",
"ejs": "^3.1.6",
"express": "^4.17.1",
"express-flash": "^0.0.2",
"express-flash-messages": "^0.1.1",
"express-formidable": "^1.2.0",
"express-mysql-session": "^2.1.7",
"express-session": "^1.17.2",
"express-validator": "5.3.1",
"helmet": "^4.6.0",
"jsonwebtoken": "^8.5.1",
"multer": "^1.4.3",
"mysql": "^2.18.1",
"mysql-pool-booster": "^1.0.3",
"node-lame": "^1.3.2",
"nodemailer": "^6.7.0",
"sharp": "^0.29.1",
"uglify-js": "^3.14.5",
"uglifycss": "^0.0.29",
"util.promisify": "^1.1.1"
}
}
My docker-compose and package-lock.json also don't contain nodemon anymore...
Delete package lock file and Try using this command to rebuild the container.
sudo docker-compose up -d --build

NPM works differently on the SAME docker image

I can't get assets compilation work on a dev's machine. Here's some specs:
1 Laravel 5.3
2 package.json:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch",
"build": "gulp"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"del": "^2.2.2",
"eslint": "^4.12.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0-beta.2",
"gentelella": "^1.3.0",
"gulp": "^3.9.1",
"jquery": "^3.2.1",
"laravel-echo": "^1.3.0",
"laravel-elixir": "^6.0.0-15",
"laravel-elixir-vue-2": "^0.3.0",
"laravel-elixir-webpack-official": "^1.0.10",
"laravel-elixir-webpack-react": "^1.0.1",
"laravel-vue-pagination": "^1.2.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"portal-vue": "^1.3.0",
"pusher-js": "^4.1.0",
"vue": "^2.4.1",
"vue-resource": "^1.3.4",
"vuedraggable": "^2.14.1"
},
"dependencies": {}
}
3 My OS: Mac OS X High Sierra.
4 Dev's OS: Debian 9
5 We both have the same node & npm versions installed.
6 I can do both npm install and npm run dev.
7 The dev can only do npm install. The second command produces errors like:
Error: ./resources/assets/js/app.js
Module build failed: TypeError: fileSystem.statSync is not a function
at module.exports (/home/thedev/Work/lo/project/node_modules/babel-loader/lib/utils/exists.js:7:25)
at find (/home/thedev/Work/lo/project/node_modules/babel-loader/lib/resolve-rc.js:13:9)
8 Now, the interesting part. In order to make it "the same", I've prepared a docker image. Here's the Dokerfile:
FROM node:alpine
RUN apk update && apk upgrade && \
apk add --no-cache bash git openssh
9 Building/running the image:
# Host OS:
cd /path/to/project && docker build -t mappanel-npm dev-assets
docker run -v "$PWD":/home/node/app --name=mappanel-npm -it mappanel-npm /bin/bash
# Inside the container:
cd /home/node/app/
rm -rf node_modules package-lock.json
npm install
npm run dev
RESULT: Everything's good on my side (just like running npm on the host). The Dev has the same errors as before!!
[07:34:55] webpack is watching for changes
[07:34:55]
ERROR in ./resources/assets/js/test.js
Module build failed: TypeError: fileSystem.statSync is not a function
at module.exports (/home/node/app/node_modules/babel-loader/lib/utils/exists.js:7:25)
at find (/home/node/app/node_modules/babel-loader/lib/resolve-rc.js:13:9)
at Object.module.exports (/home/node/app/node_modules/babel-loader/lib/index.js:111:132)
How come?… :/

TS2688: Cannot find type definition file for 'node' with #types/node installed

I'm having a difficult time building a TypeScript application on Heroku.
My dependencies list includes a type definition for all of the packages I'm using:
"dependencies": {
"#nestjs/common": "^4.5.1",
"#nestjs/core": "^4.5.1",
"#nestjs/microservices": "^4.5.1",
"#nestjs/testing": "^4.5.1",
"#nestjs/websockets": "^4.5.1",
"#types/express": "^4.0.39",
"#types/jest": "^21.1.8",
"#types/json-schema": "^6.0.0",
"#types/jsonwebtoken": "^7.2.5",
"#types/mongoose": "^4.7.29",
"#types/node": "^8.5.1",
"#types/passport": "^0.4.2",
"#types/passport-jwt": "^3.0.0",
"#types/supertest": "^2.0.4",
"chalk": "^2.3.0",
"dotenv": "^4.0.0",
"express-jwt": "^5.3.0",
"global": "^4.3.2",
"jsonwebtoken": "^8.1.0",
"mongoose": "^4.13.7",
"passport": "^0.4.0",
"passport-jwt": "^3.0.1",
"redis": "^2.8.0",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.5.5",
"tslint": "^5.8.0",
"ts-node": "^4.0.2",
"typescript": "^2.6.2"
},
However, when building on Heroku, I get:
error TS2688: Cannot find type definition file for 'node'
error TS2307: Cannot find module 'http'
and more. My tsconfig.json sets the typeRoots as './node_modules/#types' and I get a successful build locally.
Why can't Heroku find these types?
Apparently Heroku wasn't picking up changes to my package.json file or had cached some portion of the build process that was excluding #type definitions that I had moved from devDependencies to dependencies.
I cleared the build cache as such:
$ heroku plugins:install heroku-repo
$ heroku repo:purge_cache -a [appname]
$ git commit --allow-empty -m "Purge cache"
$ git push heroku master
and everything works as expected.

nodejs start react-app client

I've made a web app using create-react-app which works fine, and I usually run it using npm start but now I have to deploy it and make it work with nodejs forever module.
If I do node src/index.js it will give a syntax error and to fix this I used babel to transpile es6 to es5, but again I get the following syntax error when importing the css file:
/client/src/stylesheets/menu.css:1
(function (exports, require, module, __filename, __dirname) { header {
^
SyntaxError: Unexpected token {
This is my package.json file:
{
"dependencies": {
"async": "^2.5.0",
"axios": "^0.16.2",
"classnames": "^2.2.5",
"date-diff": "^0.1.3",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-bootstrap-table": "^4.0.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.12",
"react-select": "^1.0.0-rc.5",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"shortid": "^2.2.8",
"validator": "^8.1.0"
},
"scripts": {
"start": "react-scripts-with-stylus start src/stylesheets/menu.styl",
"build": "react-scripts-with-stylus build src/stylesheets/menu.styl",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8081",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"create-react-app-stylus": "^1.1.1",
"webpack": "^3.5.5"
}
}
To sum up the answer to this question:
If you need to deploy it, you should make a build, not run your application directly.
run npm run build and it will generate build files into a new folder.
You should not try to run the application with npm at all. You should copy all the files from the build folder into the root of your server and when a user opens the page it will be shown index.html file.
If your code has changed and is ready for production you can rebuild it, or you can automate this process with some CI tool.
You should only have React client files on your Git repository, build files should be generated during the build process on your server.

Resources