nodemon not refreshing when using typescript - node.js

I'm working on an app with NodeJs, express, typescript and nodemon.
But the page is not refreshed when I changed some code in the ts files.
How can I do to compile the ts file in js and refresh the browser with nodemon (or other tool)?
package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"debug": "^2.6.8",
"dotenv": "^2.0.0",
"express": "^4.15.3",
"iconv-lite": "^0.4.17",
"inversify": "^4.11.1",
"jsonwebtoken": "^7.4.1",
"mongoose": "^5.0.10",
"morgan": "^1.8.2",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"rxjs": "^5.4.2",
"typescript": "^2.7.2",
"winston": "^2.3.1"
},
"devDependencies": {
"#types/chai": "^4.0.0",
"#types/debug": "0.0.29",
"#types/dotenv": "^2.0.20",
"#types/express": "^4.0.35",
"#types/mocha": "^2.2.41",
"#types/mongoose": "^4.7.15",
"#types/morgan": "^1.7.32",
"#types/node": "^6.0.77",
"#types/passport": "^0.3.3",
"#types/passport-jwt": "^2.0.20",
"chai": "^4.0.2",
"chai-http": "^3.0.0",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-typescript": "^3.1.7",
"gulp-yaml": "^1.0.1",
"mocha": "^3.4.2",
"mocha-typescript": "^1.1.4"
},
"scripts": {
"start": "gulp build && nodemon dist/index.js",
"build": "gulp build",
"test": "gulp build && mocha -t 30000 dist/**/*.test.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/devslaw/TypeScript-Node.js-REST-example.git"
},
"keywords": [],
"author": "Arthur Arakelyan <arthur#devslaw.com>",
"license": "ISC",
"homepage": "https://github.com/devslaw/TypeScript-Node.js-REST-example#readme"
}
So know, anytime i make a change, I need to stop the server and run npm start again

The problem lies in the fact that your start script is watching dist/index.js. This folder only changes when the code gets recompiled into plain JavaScript. So you will need to watch the TypeScript files instead. The great thing is that you can change nodemon's default behavior. You will need to add ts-node to your package.json as well.
Try setting the script to something like the following:
nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts
You will then want to set up a nodemon.json file with the following also:
{
"watch": ["src"],
"ext": "ts",
"exec": "ts-node ./src/index.ts"
}

Related

Hot reloading not working with react nodemon

I'm trying to create a fullstack app template with react, babel, and webpack. However, when I start up the app using nodemon, any changes I make to react components when saved are not reflected on my localhost. Not even my css changes show up.
Attached is my package.json. I typically use npm start to serve to local host 8080.
{
"name": "reactappscratch",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch src --exec 'webpack-dev-server --mode development --hot --open'",
"build": "webpack --mode production",
"dev": "nodemon --watch server --exec 'npm run start:webpack'",
"start:webpack": "webpack --watch --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/material": "^5.11.7",
"css-loader": "^6.7.3",
"morgan": "^1.10.0",
"pg": "^8.9.0",
"style-loader": "^3.3.1"
},
"devDependencies": {
"#babel/core": "^7.20.12",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}

NestJS Project on Google App Engine shows error “Could not write file”

I try to deploy my nestJS application in app engine with standard env instance. But I received this error:
0mCould not write file '/workspace/dist/my/ts/file': EROFS: read-only file system, open '/workspace/dist/my/ts/file'.
I understand that nodejs will only be able to perform writing in the /tmp directory.
My question is: how can I put the workspace folder (created by cloud build) into tmp folder
here is my app.yaml:
runtime: nodejs12
env: standard
here my package.json:
{
"name": "elengui-api",
"version": "2.0.0",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "npx #nestjs/cli build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "npx #nestjs/cli start",
"start:dev": "npx #nestjs/cli start --watch",
"start:debug": "npx #nestjs/cli start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json",
"gcp-build": "npm run build",
"deploy": "gcloud app deploy"
},
"dependencies": {
"#hapi/joi": "^17.1.1",
"#nestjs/common": "^7.5.1",
"#nestjs/config": "^0.6.3",
"#nestjs/core": "^7.5.1",
"#nestjs/jwt": "^7.2.0",
"#nestjs/mapped-types": "^0.3.0",
"#nestjs/passport": "^7.1.5",
"#nestjs/platform-express": "^7.5.1",
"#nestjs/schedule": "^0.4.3",
"#nestjs/swagger": "^4.7.13",
"#nestjs/throttler": "^1.1.3",
"#nestjs/typeorm": "^7.1.5",
"#types/bcrypt": "^3.0.0",
"#types/cookie-parser": "^1.4.2",
"#types/hapi__joi": "^17.1.6",
"#types/nodemailer": "^6.4.0",
"#types/passport": "^1.0.6",
"#types/passport-jwt": "^3.0.4",
"#types/passport-local": "^1.0.33",
"bcrypt": "^5.0.0",
"class-transformer": "^0.4.0",
"class-validator": "^0.13.1",
"cookie-parser": "^1.4.5",
"crypto-random-string": "^3.3.1",
"csurf": "^1.11.0",
"express": "^4.17.1",
"hbs": "^4.1.1",
"helmet": "^4.4.1",
"mysql2": "^2.2.5",
"nodemailer": "^6.5.0",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"path": "^0.12.7",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^6.6.3",
"swagger-ui-express": "^4.1.6",
"typeorm": "^0.2.31"
},
"devDependencies": {
"#nestjs/cli": "^7.5.4",
"#nestjs/schematics": "^7.1.3",
"#nestjs/testing": "^7.5.1",
"#types/cron": "^1.7.2",
"#types/express": "^4.17.11",
"#types/jest": "^26.0.15",
"#types/node": "^14.14.6",
"#types/supertest": "^2.0.10",
"#typescript-eslint/eslint-plugin": "^4.6.1",
"#typescript-eslint/parser": "^4.6.1",
"eslint": "^7.12.1",
"eslint-config-prettier": "7.2.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.6.3",
"prettier": "^2.1.2",
"supertest": "^6.0.0",
"ts-jest": "^26.4.3",
"ts-loader": "^8.0.8",
"ts-node": "^9.0.0",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.0.5"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
This error is explained with trying to write to directory diffent than /tmp.
Official documentation contain following:
While Cloud Storage is the recommended solution for reading and
writing files in App Engine, if your app only needs to write temporary
files, you can use standard Node.js methods to write files to a
directory named /tmp.
So this is the error, it seems your code is trying to use directory mentioned in the error massage. I do not have playgroud at hand for it, but I suppose this is related with start script using npx. You should use node <your-app.js> instead. I found different question where this was confirmed by question poster.

How to create tree-shakable react module? package.json "exports" not working

I'm trying to build a react components library (e.g Buttons, Modals, etc.)
But until now I still cannot figure how to do nested imports
the objective that i want to have is to be able to do this
import Something from '#company/moduleName/Something'
here is my package.json
{
"name": "#company/moduleName",
"version": "1.0.0",
"description": "company's react design system",
"author": "",
"license": "",
"repository": "",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=13",
"npm": ">=7"
},
"type": "module",
"exports": {
".": "./dist/index.modern.js",
"./Button": "./dist/Button.modern.js",
"./Container": "./dist/Container.modern.js",
"./Input": "./dist/Input.modern.js",
"./Modal": "./dist/Modal.modern.js",
"./Select": "./dist/Select.modern.js",
"./Separator": "./dist/Separator.modern.js",
"./Sidebar": "./dist/Sidebar.modern.js",
"./Tab": "./dist/Tab.modern.js",
"./TextArea": "./dist/TextArea.modern.js",
"./theme": "./dist/theme.modern.js",
"./Typography": "./dist/Typography.modern.js"
},
"scripts": {
"build": "microbundle src/*.js --no-compress --no-sourcemap -f modern,cjs",
"start": "microbundle src/*.js --no-compress --no-sourcemap -f modern,cjs watch",
"rename": "cd dist && ren *.modern.js *.js",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
},
"peerDependencies": {
"react": "^17.0.1",
"lodash.merge": "^4.6.2",
"react-icons": "^4.2.0",
"react-modal": "^3.12.1",
"react-select": "^4.1.0",
"styled-components": "^5.2.1"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"env-cmd": "^10.1.0",
"eslint": "^7.21.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle": "latest",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.3",
"lodash.merge": "^4.6.2",
"react-icons": "^4.2.0",
"react-modal": "^3.12.1",
"react-select": "^4.1.0",
"styled-components": "^5.2.1"
},
"files": [
"dist"
],
}
currently i'm using microbundle to build everything in the src/ folder. I've added the exports field but it still says this in the example project inside the module
Module not found: Can't resolve '#company/moduleName/Button' in 'E:\Projects\Software\company\moduleName\example\src'
edit
To be clear, the dist folder shows up the correct desired result
-dist
index.modern.js
Modal.modern.js
...
I've also been able to do this, but this is not the desired output
#company/moduleName/dist/Something.modern
Any help would be greatly appreciated!

heroku app crashes because of missing module, but works on localhost

I have an app that I successfully deployed to heroku, but when I try to access it, I get this screen...
The log says the following...
The error I believe is causing the issue is Error: Cannot find module 'mongoose'.
Here is my package.json for reference...
{
"name": "ovo",
"version": "1.0.0",
"description": "see and sort OVO in real time!",
"main": "server.js",
"scripts": {
"build": "webpack --config webpack.prod.config.js",
"dev": "concurrently -k \"npm run frontend\" \"npm run backend\"",
"frontend": "webpack -d --watch",
"backend": "nodemon server.js",
"start": "npm run build && NODE_ENV=production node server.js",
"test": "mocha --compilers js:babel-core/register ./test/**/*.js --require ignore-styles"
},
"engines": {
"node": "6.11.0",
"npm": "5.0.3"
},
"repository": {
"type": "git",
"url": "git+https://github.com/leojacoby/ovo.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.17.1",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"enzyme": "^2.8.1",
"expect": "^1.20.2",
"express": "^4.15.2",
"immutability-helper": "^2.6.5",
"mocha": "^3.2.0",
"mongoose": "^5.4.0",
"node-sass": "^4.5.2",
"prop-types": "^15.6.0",
"rc-slider": "^8.6.0",
"rc-tooltip": "^3.7.0",
"react": "^15.5.4",
"react-addons-update": "^15.6.2",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-table-next": "^0.1.3",
"react-dom": "^15.5.4",
"react-rangeslider": "^2.2.0",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.3.3"
},
"devDependencies": {
"babel-eslint": "^7.2.2",
"concurrently": "^3.5.0",
"eslint": "^3.19.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"eslint-watch": "^3.1.0",
"ignore-styles": "^5.0.1",
"nodemon": "^1.11.0",
"react-addons-test-utils": "^15.5.1",
"react-test-renderer": "^15.5.4",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.18.0"
},
"bugs": {
"url": "https://github.com/leojacoby/ovo/issues"
},
"homepage": "https://github.com/leojacoby/ovo#readme",
"directories": {
"test": "test"
},
"keywords": []
}
The 'mongoose' npm package is in my package.json, and everything works just fine when I run it on my localhost. Please let me know if you want any more information and thank you for reading!
Turns out I hadn't connected my github to my heroku. I was pushing to github but it was not updating heroku so I kept experiencing the same errors. This is what I had to enable in heroku and then my edits actually manifested in the heroku.
An alternative is to just type in git push heroku master into the terminal everytime.
The last thing I had to do was type in heroku config:set MONGODB_URI='mongodb://<name>:<password>#ds123050.mlab.com:23050/ovodb' into the terminal for heroku to access my environmental variable.
Are you pushing node_modules in your code? If yes try to delete that folder and let Heroku install all modules all over again.

node server.js gives error -> Cannot find module '../wireprotocol/2_4_support'

To clarify the issue:
I have built a node server, which works fine. But on pushing to git and cloning elsewhere, it doesn't work in the new location.
Cleared node_modules, and tried npm install.
gitignore has only node_modules directory in it.
package.json contains the following
{
"name": "node-todo-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server/server.js",
"test": "export NODE_ENV=test || SET NODE_ENV=test && mocha server/**/*.test.js",
"test-watch": "nodemon --exec 'npm test'"
},
"engines": {
"node": "6.2.2"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.15.0",
"mongodb": "^2.2.5",
"mongoose": "^4.5.9",
"validator": "^5.6.0"
},
"devDependencies": {
"expect": "^1.20.2",
"mocha": "^5.2.0",
"nodemon": "^1.10.2",
"supertest": "^3.1.0"
}
}

Resources