Normally I use yarn and start my Node.js app with yarn start. I tried the same in WebStorm to debug it, but app does not starts in browser, what is wrong? I can start app, but not debug it.
Package.json:
{
"name": "ticket",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.6.1",
"#material-ui/icons": "^4.5.1",
"axios": "^0.19.0",
"facebookgraph": "^0.4.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-facebook-login": "^4.1.1",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1"
}
}
WebStorm reads the package.json by default and places all commands in the left menu
So if you wanna add more commands just edit the scripts section in your package.json
You can click for example on start an will be run the script
Related
I'm trying to work out how to create a react + redux node module for my react + redux toolkit sites. I've got multiple sites with common components and I'd like to share them using a module.
I have managed to create, publish (using npm publish), and install my node module on to my site, but whenever I try and run with it installed I get the below error for any component I make in the module.
This is the package.json on my node module. I've made sure that any dependencies match the version I use on my sites.
`
{
"name": "cpl-react-test",
"version": "3.0.4",
"peerDependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "27.4.1",
"#types/node": "16.11.27",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "8.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^3.0.1"
},
"devDependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "27.4.1",
"#types/node": "16.11.27",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "8.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) TS template.",
"main": "index.tsx",
"author": "",
"license": "ISC"
}
`
I have researched this a bit, but I'm struggling to find the solution, I think because I don't really understand the problem, or whether I'm going about this the right way at all. Any insight on what I should be looking for or doing would be greatly appreciated.
I'm trying to deploy an app on heroku, but I'm getting an error when it tried to build the app with the webpack command. I have tried a number of fixes but can't seem to get it to work. I tried running the webpack.js file from node_modules like this node node_modules/webpack/bin/webpack.js but that didn't work either. Any ideas would be greatly appreciated! Here is my package.json file:
{
"name": "waste-not-client",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "concurrently npm:watch:*",
"build": "webpack --mode production",
"watch:compile": "webpack --mode development --watch",
"watch:serve": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build && node server/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Blue-ocean-HR/blueocean-client.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Blue-ocean-HR/blueocean-client/issues"
},
"homepage": "/",
"dependencies": {
"#auth0/auth0-react": "^1.12.0",
"axios": "^1.1.3",
"compression": "^1.7.4",
"concurrently": "^7.6.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"framer-motion": "^7.6.7",
"nodemon": "^2.0.20",
"path": "^0.12.7",
"react": "^18.2.0",
"react-autocomplete-input": "^1.0.19",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"webpack-bundle-analyzer": "^4.7.0"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.1.2",
"babel-loader": "^8.2.1",
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.1",
"dotenv-webpack": "^8.0.1",
"postcss": "^8.4.19",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"engines": {
"node": "v16.16.0"
}
}
The error when I try to deploy on heroku:
sh: 1: webpack: not found
Your start script looks like it's designed for development work with live reloading. That's not what you want on Heroku.
You could rewrite your package.json scripts, but the easiest solution is probably to add a Procfile that Heroku will use in preference to your start script, e.g.
web: node server/server.js
You'll also want to remove your heroku-postbuild script entirely. It just repeats two things that Heroku does automatically (installing dependencies and running your build), and it also includes the runtime command that we now have in our Procfile.
As you can see the error but i have declared everything corrctly still i am getting this error. my server.js file is present inside the backend folder.
my package.json
{
"name": "mern",
"version": "1.0.0",
"description": "MERN Develeopment",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon backend/server.js",
"client": "npm start --prefix frontend",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend"
},
"author": "Rahul Kumar",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.13.15",
"nodemon": "^2.0.19"
}
}
Procfile - web:node backend/server.js
anybody please help on this.
I'm installing some demo React JS applications. Some of them don't show syntax errors while others do. Am I missing a package in my solution? Or is there a setting in my VS Project that needs set/changed?
Here's a screenshot. The project's package.json is below. The code builds and runs fine with the exception of deprecation warnings, etc. (not important at this point).
{
"name": "conversations-demo-sdk-update",
"version": "1.2.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"#twilio/conversations": "1.2.0",
"antd": "^3.26.20",
"dotenv": "^10.0.0",
"ngrok": "^3.4.0",
"node-sass": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-dropzone": "^10.2.2",
"react-router-dom": "^4.3.1",
"react-scripts": "4.0.1",
"request-promise": "^4.2.6",
"twilio": "~3.6.6"
},
"devDependencies": {
"concurrently": "^3.6.1",
"react-app-rewired": "^2.2.1"
},
"scripts": {
"start": "concurrently \"react-scripts start\" \"node index.js\"",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"keywords": [],
"description": ""
}
The problem ended up being JSX code in JS files. The fix is to enable Resharper's option to allow JSX in JS files.
Solution found here
My team and I created a MERN stack application (M for MySQL) that is planning on hosting our client on gh-pages and our server on heroku. So far we have been unable to deploy because we keep getting errors about our use of the npm package concurrently. Although we can access our heroku url and our gh-pages url, we are unable to connect the two
We have already tried adding a proxy to our package.json within our client folder and have added a .env.development Host name (heroku url)
Root Directory
- client
- package.json
- package-lock.json
- config
- config.json
- passport.json
- controllers
- models
- routes
- .env
- .env.development
- .gitignore
- package-lock.json
- package.json
- server.js
Server package.json
{
"name": "traveler",
"version": "1.0.0",
"homepage": "http://dchicchon.github.io/Traveler",
"description": "A social media platform for people who love traveling and those who want to explore.",
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"seed": "node scripts/seedDB.js",
"install": "cd client && npm install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.511.0",
"bcryptjs": "^2.4.3",
"concurrently": "^4.1.1",
"dotenv": "^8.0.0",
"express": "^4.17.1",
"express-session": "^1.16.2",
"gh-pages": "^2.0.1",
"multer": "^1.4.2",
"multer-s3": "^2.9.0",
"mysql2": "^1.6.5",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"sequelize": "^5.13.1"
},
"devDependencies": {},
"repository": {
"type": "git",
"url": "git+https://github.com/dchicchon/Traveler.git"
},
"bugs": {
"url": "https://github.com/dchicchon/Traveler/issues"
}
}
Client package.json
{
"name": "traveler",
"version": "0.1.0",
"proxy": "https://travelersite.herokuapp.com/",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"google-map-react": "^1.1.4",
"lodash": "^4.17.15",
"materialize-css": "^1.0.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.0",
"styled-components": "^4.3.2"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^2.1.1"
}
}
After entering the command heroku create and git push heroku master we would expect that our server will be pushed to heroku and our client will be deployed to gh-pages.
Does removing heroku-postbuild script from your backend package.json work?