We Keep Coding

parcel always caches no matter

I'm trying to run the example from an npm package that uses parcel.
The example uses a url that makes an api call.
To run the example I do: npm test
Below are the 2 attempts that I made to stop the caching. I modify the index.js, kill the local server and restart and it caches no matter what. I'm just looking to run the example and make changes and see the results. It is obviously using the dist folder, but I keep deleting things, but the issue still persists. Any suggestions would be appreciated. Feel free to ask why would I ever want to do this.
package.json
"scripts": {
"test": "parcel example/index.html --no-cache",
"patch": "npm version patch --no-git-tag-version",
"minor": "npm version minor --no-git-tag-version",
"major": "npm version major --no-git-tag-version"
}

It seems that although --no-cache technically does disable Parcel's aggressive caching, in practice it requires a few more awkward steps to actually see any new changes you've made.
In addition to running parcel with the --no-cache option, you also need to close or completely kill the terminals running any current instances of the parcel local server, and also need to bypass the browser cache by doing a hard refresh (CtrlShiftR in Firefox).

The docs for the --no-cache flag say:
Caching can also be disabled using the --no-cache flag. Note that this only disables reading from the cache – a .parcel-cache folder will still be created.
So my hunch is that it's working as expected. In most contexts it's totally fine to allow parcel to create a .parcel-cache folder (although it's best practice to add this folder to .gitignore). Is there something about your context that makes this a problem?

How to run html local without Cors? [duplicate]

This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 2 years ago.
I started an p5 project in p5s web editor. Now its getting big and I want to continue the project on my local Linux, but have no idea how to install a preview plug in there. before I used Atom on win 10 and it worked for me. But without the preview plug in I cant just preview the webpage html because of cors. Its a browser game and I have sprite and sound data in the html folder.
I tried an "allow cors" addon for firefox, but that doesnt make any difference.
I tried to start a localhost from terminal, and put an allow origin in the http header but I have no Idea how that goes.
I could might install Atom, but I dont know if the same plugins are working on linux. And I actually want to learn how professional web developers do get around it?
PS: I couldnt find anything that I understand or that solves my problem. I can understand if its not possible to post a solution for the cors error. Tipps for a nice and easy Linux Editor, or link to a tutorial, or solved thread would be great. THX

What you actually need is a web server (started from your terminal, and potentially with a command from your editor which will call the external command) which will serve your files. This has the advantage of being decoupled from your editor and this way you can change your tools or your environment without breaking your development workflow.
One way to do it is to add light-server to your project (There are a lot of alternatives to this tool tho, one of them being serve). To add it to your project you can use the following command:
npm install --save light-server
And then you can run the following command to serve your directory on localhost:4000 by default:
npx light-server -s .
To avoid using npx you can also install the server globally with this (that require to have your permissions properly configured for npm otherwise you'll get an error):
npm install --global light-server
And then you can use the command directly light-server -s .
You could also add the following to your package.json file to make the script easier to use:
"scripts": {
"dev": "npx light-server -s . -w \"**/*\""
},
With that, running npm run dev in your project directory should start the webserver and reload the page each time you modify a file in the project.
Note that this kind of development server is also available in other languages if you need to (for example python). Using a webserver instead of loading directly the page from file:///path/to/index.html in your browser should fix your CORS issues.

Why do i need to restart npm server everytime?

I am using VSCode for Reactjs and in the starting when i was learning reactjs, there was no need to restart the server but now after every modification, I have to restart the server and then only the changes are applied on the server

you were probably using nodemon or pm2 or similar tool to watch for file content during development.
on production, that feature is probably not used.
to verify this, looks for scripts section in the package.json file and see what command did you use to develop locally and run on production

Can't profile Babel-transpiled Node.js app with Spy-js in WebStorm

So me and my team are currently in the process of profiling our Node.js app to try and improve performance on it as much as we can. After doing it with Chrome's DevTools for Node.js which was not excruciatingly hard to achieve, I thought of giving Jetbrains' Spy-js a try and so far I've had no luck.
The app is run from inside a Docker container, and the code is transpiled with babel-cli on the fly so this surely complicates things a bit. Even though I could probably get it working outside Docker and somehow connect it to the other containers, I could not go as far as to try that since I haven't managed to run the app with Spy-js.
Spy-js differs from DevTools in that it doesn't just connect with the app through the native inspector's debugging port, but rather requires the app to be run from the tool so that it can also intercept and modify script execution on the fly (as per their docs).
Since I'm using babel-node to run the app, I've tried creating a new Run/Debug configuration in WebStorm pointing to it (from a fresh global install of babel-cli) as the "Node interpreter" value in the options window. I've also already added all of the app's required environment variables to the options.
With the above setup, attempting to run the new Spy-js configuration results in the following errors:
Undefined handler Super
session (ak133): Error while instrumenting '<app directory here>/node_modules/p-locate/index.js'
(g is not a function)
session (ak133): Unexpected identifier
<app directory here>/node_modules/boom/lib/index.js:249
constructor(message, options undefined {}) {
^^^^^^^^^
Which looks like it's having trouble transpiling dependencies (boom). The original source for this was options = {} so I'm not sure why it would be converted to that either.
As much as I know this is not officially supported yet, I'd really appreciate being able to get it running somehow as Spy-js seems to do its own thing and isn't just another wrapper for the native v8 profiler, so any help would be appreciated.

Try using -r babel-register instead of babel-node - does it make things any better?
Of course, you need adding .babelrc to your project, like
{
"presets": ["env"]
}

Next.js : Refresh page after modifying a file, without rerunning 'npm run'

I've been building websites using a normal LAMP stack with javascript (and jQuery) for the frontend for quite a while. But I wanted to try using javascript for the backend as well. I'm just starting to learn next.js.
On the old way, if I have modified a php file, to see the effect I can just refresh the web browser. But I noticed that with next.js you can't see the change immediately. I have to stop the npm script, rerun the "npm run xxx" command, then refresh the browser. It's kind of time consuming.
Is there a way to automate this process?

#Rudi's answer is correct, and I'll add to that that you want to make sure the command you're ultimately running is next, not next start. The difference is that next is for development mode, whereas next start is for production mode. In production mode, it doesn't watch your files for changes.
Typically, you have these commands referenced in the scripts section of package.json:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
And then the command you would actually type in and run would be npm run dev for local development or npm run build; npm run start for production mode.
If this doesn't hold for your usage, and you have to restart the server even in development mode, then there may be something wrong with your setup.

One common issue that causes this has to do with accidentally importing a component and making a minor typo with lowercase/uppercase naming conventions.
For example, you import a component named Navigation, as navigation.
This will still import Navigation, but the live reloading will be broken.

In development mode, Next.js by default will hotreload any changes, you don't even need to refresh the browser.
But if you add a custom server, it doesn't hotreload changes to that. You can use nodemon to watch and restart the server: https://github.com/remy/nodemon