How do I manually change a file name in Parcel? - javascript

Every time I try to run npm start or npm build I get an error saying unknown: Entry /mnt/c/Users/kabre/Desktop/18-forkify/index.html does not exist. I got told that Parcel might be automatically renaming my index.html. Not sure how to go on about fixing this since I'm just starting out learning Parcel/npm.

Try this:
Run npm init -y in your project
Install parcel in your project: npm install parcel-bundler --save-dev
Put this in your package.json:
"scripts": {
"start": "parcel ./index.html",
}
Run npm start after this.
And will running perfect.
Find more in https://parceljs.org/getting_started.html

Related

How can I run a yarn app/How to run a yarn dev server?

I've always used just npm and never yarn/webpack explicitly. I need to run the code from this repo:
https://github.com/looker-open-source/custom_visualizations_v2
Like a dev server or something to ensure it's serving the files properly but I don't see a "run" like npm run start. Does this just not exist with yarn? It feels like this code should work as is and I shouldn't have to add anything.
EDIT: I've now tried yarn run watch but it just seems to build the code again and not actually host anywhere
npm run somecommand just looks up in the "scripts" field of package.json for the key
somecommand and executes the value in the terminal.
So npm run start basically runs the start script from package.json
The same thing is done using yarn via simply yarn start
In the linked repo, there isn't a start script in the package.json, rather a watch script, so you should be able to run it with the below steps:
yarn to install dependencies after cloning the repo to local (similar to npm install)
yarn watch to start the webpack server (analogous to npm run watch)
Edit:
Turns out the watch command is just setting up webpack to watch for changes and recompile the project every time there is a change.
To run a development server, you will need to add another script preferably with name start and use webpack-dev-server
So the package.json has entries like:
...
"watch": "webpack --config webpack.config.js --watch --progress",
"start": "webpack-dev-server --config webpack.config.js",
...
Then running yarn start should open a dev server at localhost:8080

After I installed nodemon by "npm i nodemon" , when I tried to run it by "nodemon server.js" , it gives me this error. What should I do?

Screenshot form VS code terminalnodemon : The term 'nodemon' is not recognized as the name of a
cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the
path is correct and try again.
I just meet that question.
First, you should make sure that you had installed nodemon in a global way (npm install -g nodemon), and make sure global package dir is in the environment variables.
Secondly, you should RESTART VScode if you are opening it now.
I spent lots of time to make sure the previous one, but it still fails, then when I restart VScode, everything is fine!
Try to install nodemon globally:
https://github.com/remy/nodemon
npm install -g nodemon
and edit Your package.json for example like that:
"scripts": {
"start": "node server",
"dev": "nodemon server"
},
then in terminal enter the command =>
npm run dev
It should works for You now ;-)
Good Luck and Best regards !
Below are some solutions
This is how you can install nodemon
npm install -g nodemon
after that you have to run this command: npm run dev
here dev is (script) server name like
{
"main": "app.js",
"scripts": {
"dev": "nodemon app.js"
},
}
after that if you are facing error like
" 'nodemon' is not recognized as an internal or external command,
operable program or batch file. "
Then after install nodemon globally write below command:
npm config get prefix
in output you will get PATH and then past this path in to the Environment Variables and it solved
Restart the terminal and run this command
nodemon run dev
I hope after that it will work properly :)
I just had to use npx instead of npm
for e.g. - npx nodemon <server.js>

Is there anyway I can fix this react-app problem? Have not been able to start the development sever

~ soli$ cd react-app
react-app soli$ npm start
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/soli/.npm/_logs/2021-06-29T05_14_55_880Z-debug.log
It appears that you might not have start script in your react package.json file or maybe you happen to rename the server.js file with something else.
By default If there is a server.js file in the root of your package, then npm will default the start command to node server.js.
Possible ways to tackle this can be either any one of them -
Rename the server script file to server.js.
Add this piece of code in package.json
"scripts": {
"start": "node your-script.js"
}
Also what you can try is to run this directly-
node script-file-name.js

"npm-run-all" Is Not Recognized As an Internal or External Command

I installed npm-run-all and also configured the environment variable (which may or may not be not required) on my Windows machine but am getting an error:
'npm-run-all' is not recognized as an internal or external command,
operable program or batch file
I am trying to build my current project with npm run build which includes the script where the error is thrown:
npm-run-all -p build-css build-webpack
Do I have to do any additional things to make it run?
Make sure the npm-run-all is in your package.json devDependencies.
If npm-run-all is present in your package.json, run npm i
If not present install it, run: npm i npm-run-all -D
If error is still present, follow these steps:
Remove node_modules folder: run rm -rf node_modules
Install all dependecies: run npm i
Hope this helps!
You may just need to run the following command first (from the directory with the package.json file)
npm install
Please do that like this.
npm i npm-run-all -g
And then this issue will be fixed.
You have a couple of options here, besides installing npm-run-all as a global package as suggested by #Vaibhav in the comments:
1) Create an NPM script
The package.json file has a scripts section which can used to define shortcuts for anything you need to run while you're working on your app. There are some pre-defined scripts, like run or test than can be executed with simply npm start/npm test or you can define anything you like and then run it with npm run my-script-name. You could try:
{
"scripts": {
"start": "npm-run-all -p build-css build-webpack"
}
}
Any NPM module referenced here "just works" (i.e. the path to the executable is resolved under the hood by NPM)
2) NPX
In newer versions of NPM (i.e. >= 5.2 or so), the "NPX" executable is provided. This has a similar effect to running commands inside an NPM script. You would run:
npx npm-run-all -p build-css build-webpack
Again, the path would be automatically resolved.
If you have an older NPM install, you can also install it separately:
npm install -g npx
npm install -g npm-run-all
Works for me.
Double check if npm-run-all is in your package.json devDependencies.
I had same problem while using code editor Brackets.
To resolve the error, I did the following steps.
Add nodejs new system variable to your PC under Control Panel -> System -> Advanced System Settings
;C:\Program Files\nodejs\
After that, re-run command:
npm
I don't know if this would help anyone, but I got this error because I was doing nodemon server.js instead of nodemon server/server.js. I wasn't in the right folder!
Did you reopen the terminal after you installed node?
If you have installed npm with the current terminal window open. Your terminal window will not have loaded the latest path settings (with npm location) to find the npm application to run the command. In this case try below steps .
Try closing the current terminal session.
Reopen a new session.
Try the command again ( will pick up the new path settings with npm installed)
This worked for me.
npm audit fix --force
Also you can try downgrading your autoprefixer, seems version 10.0.0 doesn't work well with postcss
npm i autoprefixer#9.8.6

how to use jquery after running "npm install jquery"

Hi I use npm install jquery to install a jQuery for my project.but i find it is located in node_modules\jquery with many unwanted files.
but I just wana put node_modules\jquery\dist\jquery.min.js into static\jquery folder
what is the best and common way? copy and paste manually?
You can use npm to do this. In your package.json, add the following to the scripts key
...
"scripts": {
"build:jquery": "cp node_modules/jquery/dist/jquery.slim.min.js static/jquery/"
},
...
Then you can run: npm run build:jquery
You can add more build tasks to this section as you need them such as copying images and minifying scripts and css, then chain them together in a single command with npm-run-all:
$ npm install npm-run-all --save-dev
And...
...
"scripts": {
"build:jquery": "cp node_modules/jquery/dist/jquery.slim.min.js static/jquery/",
"build:images": "cp -R src/assets/images/ static/images/",
"build": "npm-run-all -p build:*"
},
...
Then run npm run build
npm is a great build tool and often bypasses the need for an additional build framework such as Gulp or Grunt. It can also handle file watchers and such to rebuild when things are modified automatically.

Categories

Resources