How to run react application using webpack-dev-server? - reactjs

when I run the command webpack-dev-server --open --mode development, I get the output as shown in the image. I don't know what to do? I have been stuck in this for a few hours now.
but when I prepare the building using the following command webpack --mode production and open the index.html file from dist folder it runs fine in the browser.
My package.json file
{
"name": "rapp",
"version": "1.0.0",
"description": "react app",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack-dev-server --open --mode development",
"build:prod": "webpack --mode production"
},
"keywords": [
"learning",
"react"
],
"author": "Rafay Hassan",
"license": "MIT",
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.8.1",
"react-dom": "^16.8.1"
},
"devDependencies": {
"babel-loader": "^7.*",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.0.7",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}

Related

The missing script:"dev" error in react on npm run dev

this is my package.json file it's a code from a course to test my code functionality.
enter image description here
The npm run build is working by the way & I'm using vite to run the npm.
{
"name": "adopt-me",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"vite",
"build":"vite build",
"preview":"vite preview",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "echo\"Error: no test specified\"&& exit1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"vite": "^3.1.4"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
to run my react on browser in, I expecting to get a localhost number to do that
According to your screenshot:
You need to run npm run dev not npm run div

How can I deploy a website on Heroku with parcel?

I want to deploy website on Heroku which created using MERN. I created it with parcel. When I deploy on Heroku, It shows following error and I can't deploy it on heroku.
How can I fix this issue?
Error Image
Package.json
{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"start": "parcel public/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.11.3",
"axios": "^0.21.1",
"dropzone": "^5.9.2",
"parcel": "^2.0.0-beta.2",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-beta.2",
"react-dropzone": "^11.3.2"
}
}
Heroku would look for a build command for production in there.
"scripts": {
"build": "npm run build",
"install": "npm install",
"start": "....",
},

unable to fix the Error: Cannot find module 'webpack-cli/bin/config-yargs'

here is my package.json installed package while setup.
while setup new application it say this error.
its new react application and all the versions are latest.
{
"name": "front-end",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/infinitydots-cn/front-end.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/infinitydots-cn/front-end/issues"
},
"homepage": "https://github.com/infinitydots-cn/front-end#readme",
"keywords": [],
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^5.1.0"
}
}

I cannot configure my package.js file for ReactJS

I type "npm start" in command prompt and there is an error
This is the error:
Insufficient number of arguments or no entry found. Alternatively, run
'webpack(-cli) --help' for usage info.
And this is the code in my package.json file:
{
"name": "reactredux",
"version": "1.0.0",
"description": "React",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && copy src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "webpack -p && copy src/index.html dist/index.html"
},
"keywords": [
"react"
],
"author": "NikolaMilicevic",
"license": "MIT",
"dependencies": {
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.6",
"webpack-dev-server": "^3.10.3"
},
"devDependencies": {
"webpack-cli": "^3.3.11"
}
}

Got 500 error when deploying Next.js to Google Cloud

I deployed a next.js application to the App Engine Standard and I get 500 error. In StackDriver the error is "/bin/sh: 1: server.js: not found"
but server.js exists in the app:
I'm serving up my project on port 3000
Package.json is like this:
{
"name": "supplychain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha",
"dev": "node server.js",
"start": "NODE_ENV=production server.js",
"transpile": "babel src -d dist --copy-files",
"prepublishOnly": "npm run transpile",
"build": "next build",
"deploy": "gh-pages -d examples/dist",
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.2.5",
"fs-extra": "^7.0.1",
"ganache-cli": "^6.4.1",
"mocha": "^5.2.0",
"next": "^4.1.1",
"next-routes": "^1.4.2",
"radium": "^0.25.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-react": "^0.82.5",
"solc": "^0.4.25",
"truffle-hdwallet-provider": "0.0.3",
"web3": "^1.0.0-beta.35"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"npm-install-webpack-plugin": "^4.0.5",
"terser-webpack-plugin": "^1.3.0",
"uglifyjs-webpack-plugin": "v1.0.0-beta.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.2"
}
}
and app.yaml is like:
# [START app_yaml]
runtime: nodejs8
# [END app_yaml]
Can somebody help me find the problem?
Change this line:
"start": "NODE_ENV=production server.js",
To:
"start": "NODE_ENV=production node server.js",

Resources