I have added the nodemon dependency to the project. Made the main file as the server.js and have added the scripts as well on the package.json.
Server.js
While running the command npm run server - its giving the error below:
Error Screen
In general, I'd say please don't post code as images, but in this case, it reveals the solution...
Your server code is server/server.js as far as the project root (where package.json is) is involved.
When you run npm run style scripts, the working directory will be the project root (and you can see as much in the > file-upload#0.0.0 server ... line) – that is, change your server script to
"scripts": {
"server": "nodemon server/server.js"
},
and you should be golden.
Paths follow the same pattern as node_modules. If you are refering to a file in your working directory you should call nodemon ./server.js
Your server.js file is inside server folder so nodemon can't find it unless you give it the path, you can change the package.json script to this:
"server":"cd server && nodemon server.js"
Hope it solves the error.
Related
Background
I've been following more or less the official guide to setup a local dev environment with react and it seems to use create-react-app, which sets up really a lot.
Now, if I run npm run build I get a minified version of everything in the build folder.
If I, however, run npm start the version NodeJS serves does not seem to have any modifications. But I cannot see these files.
Question
So either:
Can I access the files generated by npm start somewhere? As these seem to be unmodified. (build is never modified there)
Or can I somehow run npm run build, so it does a "development" build with unminimized files?
Tries
My aim is just to get access to an unminimized version of react scripts.
As for the last question I've tried some parameters and enironmental variables as suggested in this question, but as you can see, it failed:
$ NODE_ENV=dev npm run build --dev --configuration=dev
> example-project#0.1.0 build [...]
> react-scripts build
Creating an optimized production build...
[...]
System
My package.json has the default scripts:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Note: Please do not ask why I am doing it or try to convince me that it is bad. There are many reasons why I'd maybe want this, e.g. debugging or this specific use case.
To change the webpack config and build scripts you have either to eject from create-react-app (i would not recommend this step, as it breaks future compatibility) or use tools like rewire to override some settings
Take a look at this.
https://github.com/timarney/react-app-rewired
I personally used just rewire
npm i rewire --save-dev
Here is a sample config i created for one of my projects in the past and it worked pretty good!
Create build.js
Change your package.json so that it runs build.js
build.js
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');
// Consolidate chunk files instead
config.optimization.splitChunks = {
cacheGroups: {
default: false,
},
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;
// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';
Then in my package.json i changed the npm script links like this
(node build which will run the build.js script)
package.json
"scripts": {
"start": "react-scripts start",
"build": "node build && gulp",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
So if you really want to eject from create-react-app, all you have to do is to run
npm run-script eject
Then you will get a new folder with all configs used by create-react-app
But as i said before, there is no reason why not to use rewire and just override the config instead of ejecting.
I wanted the unobfuscated code of a React app - mostly of curiosity, I had the source - while having the job of rewriting it in Angular (producing a far more maintainable app 5% of the size and 1% dependencies).
I've never used React but discovered by modifying the file
<base_path>/node_modules/react-scripts/config/webpack.config.prod.js
and replacing the large optimization config item, under module.exports, with the following...
module.exports = {...
optimization: {
minimize: false,
splitChunks: {
chunks: 'all',
name: true
},
runtimeChunk: true
},
npm run build built unobfuscated, readable code that ran as expected, using no other modifications. Used Gitbash only with the commands npm install, npm run build and npm start - Just thought someone may find that useful.
I don't recommend this because the code you want is still wrapped in a webpack eval mess. It's easier to pick the useful bits from the source or just rebuild the app. At best, I got to see what a cluster react and webpack is.
Why can't you see the source files? Here is what I would try:
Start your react app with npm run start
Open your browser to http://localhost:3000
Open Developer tools and inspect the created chunked bundles by the webpack-dev server. In Chrome on a mac, you can do the following: cmd+option+j will open developer tools. Then click the sources tab: within this tab you will see the bundles created by react's build configuration. Now the output of these bundles might not be pretty but it's all there.
Alternatively, all your application's build configuration settings are contained within your webpack.config.js file even when you use create-react-app. As this configuration is just encapsulated within the react-scripts node module. So maybe you could try editing this file directly, without ejecting: <base_path>/node_modules/react-scripts/config/webpack.config.js. Although you need to be careful as to not break an existing configuration setting. You probably want to mess with the source-map settings for production builds. At least this way if you ruin this file you can always just remove and reinstall react-scripts and be back to your initial configuration. This will also allow you to play around with your customizations in 'semi-safe' sandboxed environment. Remember, there is no magic that create-react-app is providing rather it's just making useful defaults for your build configuration.
Lastly, as #xzesstence pointed out you can try out the react-app-rewired module.
Hopefully that helps!
The files are kept in the server process memory and not written to disk, unless you eject the scripts (or if it is possible to use a tool like 'rewire') and modify them to write it to disk using the writeToDisk option as described in the webpack DevServer docs.
You can however get the actual file list/links by navigating to the webpack-dev-server endpoint under the server.
For instance if using the default url at localhost:3000 then use the following url to see all files on the server:
http://localhost:3000/webpack-dev-server
But what you really need is only the index.html (which is in general just a stub that loads the JS files) and the 3 following JS files which appear to be consistent on all create-react-app installments, along with their respective source map files.
main.chunk.js
bundle.js
vendors~main.chunk.js
You can just right click on the links on the page and save them, or you can navigate direct the link or get them from the Chrome Dev Tools "sources" tab.
Note that in general for code changes only the main.chunk.js file is updated, so for the average code change you might just fetch the updated main.chunk.js and main.chunk.js.map files.
I know it's way too late to answer this, but try this npm i -D cra-build-watch.
I feel this library is underrated but it just watch the changes in react app and does not re-build the whole package again and again.
Although rewiring helps in making the build by not minifying it, however, still it goes through the whole process of building again and again.
After spending a whole day on this problem, I could not find a way to get the none-minified version of the production code,
what I did was: open the dev tools on chrome, navigate to the sources tab; now find the javascript file (in create-react-app it is usually in static > js > main.js)
when the javascript file is visible, at the bottom left of the screen a pair of curly braces appear (look at the image):
screenshot of the dev tools
when you click on the curly braces, it beautifies the code, and then you can add breakpoints to the code (click on the number on the line ) and refresh the page to start the debugger, it is not convenient to deal with that code, but for now that is what worked for me.
hope it helps.
I have a pretty basic nodemon configuration. I'm fixing this legacy node 7 project that I inherited and trying to make the development process a little bit painful. First thing first, a proper restart-and-transpile process (since it's built using ES6 modules syntax).
This is my folder structure:
- src
|- index.js
- dist
|- index.js
- index.js
- nodemon.js
I run nodemon as "start:dev": "nodemon index.js"
Here's it's content:
// index.js
if (process.env.NODE_ENV === 'production') {
require('./dist/index.js');
} else {
require('babel-register')({});
require('babel-polyfill');
require('./src/index.js');
}
The idea is that the code is transpiled on runtime, so that I don't have to stop server, re-transpile, start server manually, as I have been doing before.
Last but not least, nodemon config
// nodemon.js
{
"restartable": "rs",
"ignore": [
".git",
"node_modules/**/node_modules"
],
"verbose": true,
"watch": [
"src"
],
"env": {
"NODE_ENV": "development"
},
"ext": "js json"
}
I took this setup from MERN, and I think it should work. However, when I made a change and save, it goes:
[nodemon] files triggering change check: src/index.js
[nodemon] matched rule: /Users/me/project/path/src/**/*
[nodemon] changes after filters (before/after): 1/1
[nodemon] restarting due to changes...
[nodemon] src/index.js
(stuck here. it never restarts)
I've been checking the code, and the only thing that I'm unfamiliar with, that maybe be causing it I can think of would be a child_process.execFileSync() call, that will call a java tool; and a connection pool with mysql.createPool() (mysql package).
Tried both in Node 7.5 and Node 8.9. Any idea of what could be wrong?
I am using window 10, and I faced this issue after I accidentally removed my %PATH% variable. Try adding these three paths if it is the case:
C:\Windows; C:\Windows\system32; C:\Windows\System32\Wbem;
Add the below path in the environment variable. It will solve your problem.
%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\wbem;
I was using windows 10, and I faced the same isuue. I used the supervisor instead of nodemon and it's working perfectly.
Run the below command :
npm install supervisor -g
supervisor src/index.js
For those who still do not have an answer, I reinstall an older version and it works
like "npm i -g nodemon#1.19.0"
I was using windows 10, and I faced the same issue. I used the supervisor instead of nodemon and it started working fine for me.
Run the below command :
npm install supervisor
and in package.json add these below lines of code in the scripts key
"scripts": {"start": "supervisor app.js"}
Use below two commands:
npm install supervisor -g
supervisor src/index.js
I solved a similar issue before. I did the following things and it did work for me.
npm start run:dev
nodemon npm start run:dev
what is does is first i started server normally and then i used nodemon.
2022 update for windows 10
Go to This Pc -> properties -> Advance System Settings -> Environment variable -> User Variables.
Double click 'path' and create 'New'. Then add this path
C:\Windows\System32
Note: Make sure to close and restart your terminal.
type : ps aux | grep node
or ps aux | grep port(e.g 3000)
and find the process copy its processId
then type in terminal
kill -KILL processId
it will stop your process by force
than again start server
Try executing
npm -g uninstall nodemon
then
npm -g install nodemon
That fixed it for me.
Check whether you place your code in location without write permission.
(Especially who put on Desktop)
If no, please move the folder to other place with write permission.
Or change the folder permission.
By default, nodemon looks for the .js file.
And due to the link of other extn files with your index.js file, it couldn't restart.
node index.js -e js,hbs,html
You can mention all the extensions which are linked with your index.js file
Hope it works for you.
Thanks
Nodemon is now considered to be in stale situation.So its alternative npm package supervisor can be installed globally by npm i supervisor -g and be used as supervisor filename.js
go to my computer's properties, click on system protection then click on advanced then click on Environment variables .
There Two types of Variables. user variable and system variable.
in system variable click on path then click on edit ,click on new (add three variables)
%SystemRoot%\system32;
%SystemRoot%;
%SystemRoot%\System\Wbem
then click ok .Rerun your cmd then run .it works
Supervisior is an alternative for nodemon. It worked for me
npm i supervisior -g
supervisior app.js
In The Package.Json File Add Start Script As
"nodemon": "nodemon dev-server.js"
and Start The Server As
npm run nodemon
When I using the latest version of nodeJS, it won't work.
But when I change back to 10.15.0, it works normally.
Make sure nodemon isn't watching a file that you are writing to when the server starts up. You can set nodemon to ignore that (those) file(s) using the --ignore flag
for example
nodemon index.js --ignore 'something/*.json'
This works for me;
Delete these directories; C:/Users/{user}/AppData/Roaming/npm and C:/Users/{user}/AppData/Roaming/npm-cache and re-installed global npm modules.
Sheers!!
open cmd as administrator and write nodemon [namefile.js]
I'm new to React and Node, so I apologize ahead of time if this question shows a high level of ignorance when it comes to the subject. I'm trying to use the react-foundation library, and they provide a starter boilerplate at this link: https://github.com/nordsoftware/react-starter.
I follow the directions to
Install the dependencies using "npm install"
Start the development server with "npm start".
I cannot figure out how to get the page to open in my browser. I tried making a server.js file, and running "node server.js," but I get a "Cannot GET /" error. I do not know how I can open this in by the browser.
When you "npm start", it should tell you where webpack-dev-server is serving at in the console log. Otherwise, I can see this in the webpack config file, dev mode:
development.entry.app.push('webpack-dev-server/client?http://localhost:8080');
(https://github.com/nordsoftware/react-starter/blob/develop/webpack/development.js)
So try pointing your browser to localhost:8080. You don't need a supplementary server.js file.
I have a node.js code in WebStorm. I debug the code by using node.js configuration and it works fine.
However, once I run debug mode in npm configuration, WebStorm ignores the breakpoints. I tried to add the variables "--debug" and "--debug-brk" to 'Arguments' field and it still didn't solve the problem.
Please check out this tutorial: http://pavelpolyakov.com/2016/05/01/webstorm-npm-tasks-debug/
You need to add $NODE_DEBUG_OPTION in your npm script.
Here's the original issue on the WebStorm tracker.
You need to add $NODE_DEBUG_OPTION (or %NODE_DEBUG_OPTION% on Windows) in your npm script. Please note that NODE_DEBUG_OPTION should be placed right after node, where node parameters are expected, for example:
"scripts": {
"start": "node $NODE_DEBUG_OPTION ./bin/www"
}
I am new to node. I am trying to run an express server. I get no errors when installing express but when i run npm start or node app (as all the beginner tutorials point) nothing seems to be happening. The only way i can start the server is by typing node /bin/www. My operating system is Windows. Any advice?
The Express scaffold script generates a package.json file with a start script field that points to the app.js file it also created. Since Express 4 was released the scaffold generator script has been moved to its own package. https://github.com/expressjs/generator
All npm start does is look in the package.json file for a starting script to pass to node. You can see this in the documentation.
Running npm start with a package.json like this:
"scripts": {
"start": "app.js"
}
Is exactly equivalent to running node app.js.
I managed to solve my issue by changing the code page of cmd-dos. By using chcp 850 or chcp 65001 in cmd thus changing codepage to latin - utf8 the issue is gone.