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"
}
}
Related
I'm getting started with testing with this article Deploying our app
Here's my package.json:
{
"name": "complete-toolchain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "node tests/*.js",
"build": "npm run test && npx parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.21.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.14.0",
"eslint-plugin-react": "^7.21.5",
"parcel-bundler": "^1.12.4",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.2.0"
},
"dependencies": {
"date-fns": "^2.16.1",
"format-number": "^3.0.0",
"react": "^17.0.1",
"react-async-hook": "^3.6.2",
"react-dom": "^17.0.1"
}
}
I get error when I run npm run test:
Cannot find module 'C:\Users\x\complete-toolchain\tests\*.js'
Why doesn't it understand this? Of course it works with "test": "node tests/nasa-feed.test.js",.
Need help to start nodejs server and next js app at the same time using concurrently npm package at our backend. I have written the script in package.json file on backend side but it's not working.
I don't know exactly know even the concurrently is exist for next js or not. The below script is working fine for React-App but not working for Next JS App
package.json (backend)
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "",
"license": "ISC",
"dependencies": {
"#sendgrid/mail": "^7.4.0",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-jwt": "^6.0.0",
"express-validator": "^6.6.1",
"formidable": "^1.2.2",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.20",
"mongoose": "^5.10.9",
"morgan": "^1.10.0",
"nodemon": "^2.0.5",
"shortid": "^2.2.15",
"slugify": "^1.4.5",
"string-strip-html": "^6.1.0"
},
"devDependencies": {
"concurrently": "^5.3.0"
}
}
package.json(frontend)
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"proxy": "http://127.0.0.1:8000",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"aos": "^3.0.0-beta.6",
"isomorphic-fetch": "^3.0.0",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.1",
"next": "^9.5.5",
"nprogress": "^0.2.0",
"prop-types": "^15.7.2",
"query-string": "^6.13.6",
"react": "^16.14.0",
"react-bootstrap": "^1.4.0",
"react-dom": "^16.14.0",
"react-modal": "^3.11.2",
"react-quill": "^1.3.5",
"react-render-html": "^0.6.0",
"reactstrap": "^8.6.0"
}
}
In your package.json file of the backend, you need to replace
"client": "npm start --prefix frontend",
with
"client": "cd ./frontend && npm run dev"
I am assuming that your Nextjs app is in the frontend folder/directory. change the folder accordingly. Then you can run npm run dev command from the backend directory.
Now you will be able to start nodejs server and next js app at the same time using concurrently npm package
I am having problem with running the project, the project is contains the frontend(react) and backend(node) how should run the frontend side for the project
{
"version": "1.0.0",
"description": "' open source project",
"main": "index.js",
"dependencies": {
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.6.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-function-bind": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"scripts": {
"serve": "node src/backend/main.js",
"watch": "webpack --mode=development -d --watch",
"build": "webpack --mode=production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": { "type": "git", "url": "" },
"keywords": [],
"author": "",
"license": "ISC",
"bugs": { "url": "" },
"homepage": ""
}
If you want to run frontend(React) and backend(Node) at the same time install concurrently and nodemon.
npm i concurrently
npm install -g nodemon
then at the package.json file add concurrently to run both frontend and backend together.
"scripts": {
"start": "node server/index.js",
"backend": "nodemon server/index.js",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
},
If you want to run only your frontend go to client folder and open your terminal and type
npm start or yarn start
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"
}
}
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"
}