Develop Reference

Module not found on migration from 10 to 13 - nextjs

I've recently tried to migrate our old site running on next 10 to the latest version 13. The site has a custom backend written with express. While running the project via concurrently I keep getting Module not found error as soon as I run the client on 3000. This is the scripts section("npm run dev" below is used to run the project):
"start_dev": "nodemon --inspect -w ./src/server -w ./src/server.js -w ./src/start.js ./src/start.js",
"build": "next build",
"client": "next dev",
"server": "npm run build && npm run start_dev",
"dev": "npx concurrently -k \"npm run server\" \"npm run client\""
Things seem to be working fine if I build the project first and then run client and server on separate terminals. But with this also, if I make a change in server that doesn't get picked up by client on the other terminal.
I'd highly appreciate if someone can give this a look as I'm stuck on the same issue for quite some time now. Please let me know if any further information is needed from my end here.

the problem is if the .next folder is generated by nodemon change, client side webpack hot reload cannot read .next folder
"scripts": {
"client": "next dev",
"build": "next build",
"server": "npm run build && npm run nodemon",
"start": "next start",
"lint": "next lint",
"nodemon": "nodemon -w ./src/server.js -w ./src/server ./src/start.js",
"dev": "concurrently -k \"npm run server\" \"npm run client\""
},
When you run npm run dev and refresh the page, this is how .next/pages folder. home index.js exists:
if I make a change in ./src/server.js after I see the home page on screen, .next folder will be recreated without index.js by nodemon change and if I refresh the page I will get error.
when you reload your page after change in server.js file you get error because index.js page does not exist. It does not exist because .next folder was not generated by webpack
When you first start the app, before refreshing the browser, if you make a change on server.js file, .next folder will be created and if you refresh the page you will get the same error. for some reason if .next folder generated by the nodemon change, client side cannot communicate by .next folder.
concurrently runs scripts in parallel, with npm run server you are calling next build and with npm run client you are calling next dev. So, you are calling next dev and next build scripts concurrently. Even though it says it is concurrently, I think it is not exactly concurrently. if you install npm i npm-run-all and add this script
"dev": "npm-run-all --parallel client server"
your app will never load, you will see flickering in a loop.

How to integrate starting Sass with the node server?

How to start localhost node.js live server with Sass ? so I wont have to keep switching between starting sass, and do my changes then start the node again ? since its too time consuming ?
also please some info about the --recursive.
"scripts": {
"start": "nodemon server.js",
"start-server": "node server.js",
"sass": "node-sass -w FrontEnd/public/scss/ -o FrontEnd/public/css/ --recursive"
}

Modify your script file:
{
"scripts": {
"sass": "node-sass -o /path/to/dist /path/to/src",
"sass:watch": "npm run sass && npm run sass -- --watch --recursive"
}
}
And you can use it like this: npm run sass:watch
Alternative method:
"scripts": {
"build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
}
In the above example, the watch:sass script works as follows:
Run the build:sass script. This will compile your CSS.
Run the build:sass script again, but this time include the -w flag. This will compile your CSS when one of your SASS file changes.

How to configure pm2 with webpack for typescripts compile and reload?

Is there any boiler plate code to use pm2 with webpack watch option for ts files auto hot reload?
pm2 start index.js is helpful to run directly, but how to add multiple tasks before doing it like watch files and auto reload using webpack and pm2 from dist folders?

After much research considering performance, I might add live reload, which is a to-do task – but not a priority as of now.
"scripts": {
"build": "webpack --config webpack.config.js --watch",
"pm2": "pm2 start ./dist/server.js --watch=true",
"postinstall": "npm run build",
"test": "jest --forceExit",
"test-ci": "npm test && cat ./coverage/lcov.info | coveralls",
"start": "supervisor ./dist/server.js",
"server:dev": "concurrently \"npm run build \" \"npm run start\""
}

Create a process.json for pm2 config In the script key you can give a webpack compiler to run. I am not sure if it will run for it watch reload.

Watch template files and copy them to dist/ folder

I'm using typescript on my project and I can successfully watch + compile .ts files and output them to dist folder.
here is the scripts part of my package.json
"start": "npm run build && npm run watch",
"build": "npm run build-ts && npm run tslint",
"test": "cross-env NODE_ENV=test jest --watch",
"watch": "concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",
"serve": "nodemon dist/server.js",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
The problem is I want to use js templating engine (nunjucks) and I need to watch the view files inside the views folder and move them to the dist folder.
Is there a way by just using npm scripts or nodejs?
Or do I need to use other tools like gulp or webpack?

I have the "same" request to for a CRUD graphql back-end server, but don't want to use gulp or webpack just to keep it simple.
I see that you use nodemon like me. Then, according the docs at https://github.com/remy/nodemon, it can be used it to monitor changes of any kind of file other than the default js. More over, nodemon can monitor the status of other transactional server other than node.
The first task is detecting the changes of wanted files: in my case I want copy the *.gql files in my src/schema folder to build/schema folder. For that, you can use the ext for the kind of files, and watch option for the source folder to explore.
The second one task is matter of copying the files. Naturally, you can use the copy command of your host OS. In my case I use the DOS xcopy command of the Windows shell (or cp in Unix like OS). nodemon has an "event-hook" with the event option, that can execute a command line when an event occurs. Just we need the restart event of the node server when the changes are detected for nodemon.
You can use the command line options, or a global config file, or in you local package.json project config file. I show up the last one using nodemonConfig section of package.json:
"nodemonConfig": {
"watch": [
"./src/schema",
"./build"
],
"ext": "js,gql",
"events": {
"restart": "xcopy .\\src\\schema\\*.gql .\\build\\schema /Y /O /R /F /I /V /E"
}
}

Ozkr's answer is great, I just want to add what worked for me, I had to change it a bit as nodemon was running into an infinite restart otherwise:
"nodemonConfig": {
"watch": [
"./views",
"./public"
],
"ext": "hjs,js",
"events": {
"restart": "cp -r views dist \n cp -r public dist"
}
}

copy-and-watch does just that:
I use this code to copy html files during development:
"copy_html": "yarn copy-and-watch src/mail_templates/* prod/mail_templates --watch --clean",

How do I add a custom script to my package.json file that runs a javascript file?

I want to be able to execute the command script1 in a project directory that will run node script1.js.
script1.js is a file in the same directory. The command needs to be specific to the project directory, meaning that if I send someone else the project folder, they will be able to run the same command.
So far I've tried adding:
"scripts": {
"script1": "node script1.js"
}
to my package.json file but when I try running script1 I get the following output:
zsh: command not found: script1
Does anyone know the steps necessary to add the script mentioned above to the project folder?
*Note: the command can not be added to the bash profile (cannot be a machine specific command)
Please let me know if you need any clarification.

Custom Scripts
npm run-script <custom_script_name>
or
npm run <custom_script_name>
In your example, you would want to run npm run-script script1 or npm run script1.
See https://docs.npmjs.com/cli/run-script
Lifecycle Scripts
Node also allows you to run custom scripts for certain lifecycle events, like after npm install is run. These can be found here.
For example:
"scripts": {
"postinstall": "electron-rebuild",
},
This would run electron-rebuild after a npm install command.

I have created the following, and it's working on my system. Please try this:
package.json:
{
"name": "test app",
"version": "1.0.0",
"scripts": {
"start": "node script1.js"
}
}
script1.js:
console.log('testing')
From your command line run the following command:
npm start
Additional use case
My package.json file has generally the following scripts, which enable me to watch my files for typescript, sass compilations and running a server as well.
"scripts": {
"start": "concurrently \"sass --watch ./style/sass:./style/css\" \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
}

Steps are below:
In package.json add:
"bin":{
"script1": "bin/script1.js"
}
Create a bin folder in the project directory and add file runScript1.js with the code:
#! /usr/bin/env node
var shell = require("shelljs");
shell.exec("node step1script.js");
Run npm install shelljs in terminal
Run npm link in terminal
From terminal you can now run script1 which will run node script1.js
Reference: http://blog.npmjs.org/post/118810260230/building-a-simple-command-line-tool-with-npm

Lets say in scripts you want to run 2 commands with a single command:
"scripts":{
"start":"any command",
"singleCommandToRunTwoCommand":"some command here && npm start"
}
Now go to your terminal and run there npm run singleCommandToRunTwoCommand.

Suppose I have this line of scripts in my "package.json"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"export_advertisements": "node export.js advertisements",
"export_homedata": "node export.js homedata",
"export_customdata": "node export.js customdata",
"export_rooms": "node export.js rooms"
},
Now to run the script "export_advertisements", I will simply go to the terminal and type
npm run export_advertisements

Example:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"build_c": "ng build --prod && del \"../../server/front-end/*.*\" /s /q & xcopy /s dist \"../../server/front-end\"",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
As you can see, the script "build_c" is building the angular application, then deletes all old files from a directory, then finally copies the result build files.