Develop Reference

How do I get NPM commands to run properly in Eclipse?

I have a usable workflow that I want to make better. I'm building a JS library, and the way I am executing smoke tests on code is by using webpack to package the library and write it to a file that is included in an HTML file for viewing the effects of the code.
To do this, I make changes to the file in Eclipse, save it, then I must leave Leave eclipse and go to Terminal to run "npm run buildInbrowser" to execute "webpack --config inbrowser.config.js".
The configuration works perfect with regards to webpack, the configuration, and the npm setup, but when I try to configure eclipse to run those commands, it brings up an error: "env: node: No such file or directory" I've attached screenshots of my launch NPM configuration.
My system is MacOSX Catalina using Nodeclipse, npm v9.3.1 and node 16.18.0.
Again, there is no issue with me running these commands in terminal, but they won't run through node. This makes me think it's something simple that I overlooked.

As nitind pointed out, I had incorrect syntax on the PATH variable for eclipse, which was causing the problem. Also noted is that Eclipse did not populate my path variable by default, so i did have to manually enter it in. See the screen shot for the fix.

ENOENT: no such file or directory in Gatsby

I've started learning Gatsby, every time I make any changes in src/pages folder, it gives an error that comes from .cache folder like this:
Generating development JavaScript bundle failed
ENOENT: no such file or directory, open '...\Gatsby\src\pages\someFile.js'
I am deleting .cache folder then re-running gatsby develop command and it works, but it takes more time.
Question: Is there any command to make it faster or easier?

Question: Is there any command to make it faster or easier?
gatsby clean does the trick. It removes the .cache and the /public folders. From Gatsby's docs:
At the root of a Gatsby site, wipe out the cache (.cache folder) and
public directories:
gatsby clean
This is useful as a last resort when your local project seems to have
issues or content does not seem to be refreshing. Issues this may fix
commonly include:
Stale data, e.g. this file/resource/etc. isn’t appearing GraphQL
error, e.g. this
GraphQL resource should be present but is not
Dependency issues, e.g. invalid version, cryptic errors in console,
etc.
Plugin issues, e.g. developing a local plugin and changes don’t
seem to be taking effect
I personally add my own commands in the package.json, like:
"scripts": {
// other scripts
"start": "gatsby clean && gatsby develop",
},
So every time I need to run a gatsby develop I run yarn start or npm run start instead, executing the gatsby clean command before.

Do I need to run "npm run build" every time I made changes?

First of all, I am really new to NPM stuffs. But I do know React and PHP. So I have figured myself to create a CMS system using PHP as a backend and React as a frontend with the help of CDNs from Babel and React(And ofc axios to make data requests and sends). However, I do want to get into more proper way with webpack with the actual website. So, I have followed along the tutorial from this article. He has explained quite extraordinarily. However, he uses HTML whilst in my case, I have a PHP. So since I am not fully aware of what I am doing. I have redirected the HTMLWebPlugin to my PHP File in webpack.config.js.
plugins: [
new HtmlWebPackPlugin({
template: "./../index.php",
filename: "./index.php"
})
However, when I make changes the code and refreshes it, the webpage will not adapt to the changes unless I run "npm run build" for the next time. I do know I am running it from the built app. And this is because I am rather making changes on the entry files (index.js) when the webpage is rendering the output files (dist/main.js). But is this okay to connect these two and is there a way to automatically adapt to changes I make in the entry files?

So finally, I have found my solution. When you want to re-run "npm run build" every time a file changes. You need to install watch via npm. It checks all the files inside a directory and when you change something or on-save, it will re-run all the scripts inside package.json. So steps -
Install watch by "npm install watch"
When watch is installed, add "watch": "watch 'npm run build' ./directory-you-want-to-track"
Run "npm run watch"

Use this command:
tsc src/index.ts --watch --outDir ./lib
ref: https://www.youtube.com/watch?v=F6aHIh5NglQ

Yes, there is a way to solve this issue. You can use webpack's Hot Module Replacement feature. It's is just running webpack in development mode with proper set of config which you should find in webpack official documentation.

If you are using Vite Laravel plugin open package.json
install watch
npm install watch
and on scripts change it to
"build": "vite build --watch"
It should automatically update when you make changes

Next JS npm start app load 404 page not found error for physical pages

My project works well with run dev command but when I try to npm start I got 404 page not found error for other pages (pages/...) except Index.js.
I tried several ways which I found from forms(gthub issues, and blogs), but nothing worked.
Any Idea? Actually why there should be difference between run dev and start? I think we should see whats wrong in our app during the dev process
the scripts from package.json
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build"
},
and next.config.js
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]"
}});
As you see I didn't change anything after installing nextJS.

I found out that if the filenames have uppercase letters on Windows, you get a 404 error.
I changed all filenames to lowercase characters and the 404 errors went away.

First, you need to understand what kind of app do you want to build.
Is it serverless? or kind of with server and what web server do u want to use (there are so many options).
For serverless app:
All you need to do for production build is next export, this function will generate static files to be served as your website. Read more here...
For app with server:
If you want to run npm run start, you need to do npm run build first.
npm run build compiles and optimizes your build for production mode.
npm run start run your web server to serve your html files.
If you have done those two steps, it means something wrong with your server files, your web server's API didn't listen to the request, therefore it doesn't redirect you to the correct page.

Before starting your application you need to build using npm run build command and then start your application.

Create-react-app unable to open IDE when error occurs

I am using create-react-app and everything is working as expected. However I would like that when an error occurs it automatically opens the file in question.
I have set up the .env.local file as suggested.
BROWSER=none
REACT_EDITOR=phpstorm
Error
Note that the development build is not optimized.
To create a production build, use npm run build.
Could not open persistStore.js in the editor.
The editor process exited with an error: spawn phpstorm ENOENT.
To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server.
Maybe this is an error with PhpStorm rather than RCA?