I am using aurelia skeleton-es2016. Gulp watch takes at least 2 minutes. I have a dual-core 2.8Ghz amd with 6gb ram.
I initially had issues with missing modules after npm install but fixed those. Not sure if that is relevant to this case.
Also I'm not very experienced with gulp. Are the files being served from the the dist folder? Are those the files being watched by browser-sync for changes? I tried making a change to the index.html page and the change was not reflected in the browser without a reload. Is that file not among the ones watched?
It´s unusual that gulp watch needs so much time.
You should try to reinstall all npm and jspm packages.
If you have problems deleting the npm_modules folder you can try the tool I use in this case: Unlocker.
The files watched by browserSync are in your root folder .. You can see that under skeleton-es2016\build\tasks\serve.js this serve task is used by the watch task.
Or in your console where you are running gulp watch: [BS] Serving files from: .
If you used the newest skeleton-es2016 you should also have a browserSync control App running under http://localhost:3001/
BrowserSync will not detect changes inside your index.html file. That´s because of the watch task configuration:
only files under "src" will be watched.
You can see this configuration under: skeleton-es2016\build\paths.js and skeleton-es2016\build\tasks\watch.js
Related
I'm trying to use the new Blazor Javascript isolation feature. I'm importing my own JS file as per the example ExampleJsInterop.cs. It works until I try to import an NPM module from within my script. In my package.json I have set up a dependency on interactjs, and in my script I have added import interact from 'interactjs'; at the top.
I'm getting a Failed to resolve module specifier "interactjs" error. I'm not sure how to get past that.
Previously I was using Webpack to bundle my script and dependencies together into a single file that is added into my index.html as a tag. This was working fine, but I'm not sure how to continue using NPM packages with JS isolation.
Thanks!
A bit late, but I've just finished solving a similar issue.
The npm files are installed to the hidden node_modules folder. This isn't available to your script when you are running your app, unless you do something to make it available. however, even if you copied the interactjs file into your scripts folder it would still not work if it was an npm file. Those are meant to run in nodejs not a browser. So you would still need to use your bundler. I tried webpack, but had some issues with certain files so ended up with snowpack instead. I just finished a bunch of articles on javascript interop - part 4 deals with npm
I forgot that I left this question open for almost a year!
I ended up solving it using Snowpack to bundle the NPM package into the Blazor wwwroot folder. Credit goes to this article for pointing me in the right direction: https://nbarraud.github.io/js-in-blazor.html
I am using Vue 2 (doesn't really matter which version exactly).
I want to test some things that happen behind the hood in Vue. So I decided to add console.log('test123') in Vue's files in node_modules. It turns out that the console log never fires. I put that in all files of Vue in node_modules, even in all files of dist's folder of Vue.
How can I achieve this ? If I fork the repo, then I'd have to upload new versions each time on my repo and then run npm install. I know that will work but wanted to achieve this without forking.
Any ideas what I am missing ?
there are many ways .. but i feel more comfortable using this method :
you can download any npm package in a seperated folder next to your project...
open the folder of the package then run this in the terminal:
npm link
then open the project folder and run
npm link ../package-path # link the dir of your dependency
References
npm-link
How to test an npm package locally
Due to clients/coworkers wish I have to switch to npm. The Project was created using Vue CLI and Yarn as default Package Manager.
I first thought no big deal, so I deleted node_modules folder and yarn.lock file. Then I ran npm install and then npm run serve.
It works and compiles like normal, recompiles when I change a file, all good so far but here is the weird part: the changes do not reflect in the browser. I have to refresh the page manually.
I tried to look into config files for vue or webpack. But there are none. No Webpack config, no vue cli config, no build folder.
What I have is:
- .eslintrc.js
- .browserlistrc
- babel.config.js
- postcss.config.js
I dont know what else to look for? Anyone any idea what this might be?
Thanks a lot,
-J
What was the cause in my case(I have Linux OS):
It seems that the value of: max_user_watches
in the /proc/sys/fs/inotify/max_user_watches
is affecting webpack => which is interfering with hot reloading.
To check your actual value
$cat /proc/sys/fs/inotify/max_user_watches
16384
16384 was in my case and it still wasn't enough.
So you will need to increase your value as well.
SOLUTION if you have Linux OS:
Create the file:
sudo nano /etc/sysctl.d/90-override.conf
And populate it with:
fs.inotify.max_user_watches=200000
It seems 200000 is enough for me, you can have a higher value if you want.
After you create the file and add the value, just restart the PC and you should be ok.
Vue CLI depends on #vue/cli-service which acts exactly like Facebook's Create React App (react-scripts).
If you are familiar with create-react-app, #vue/cli-service is roughly
the equivalent of react-scripts, although the feature set is
different.
https://cli.vuejs.org/guide/#cli-service
So what both of them do is "simplify" configuration of the project for you by hiding all the bundling configs (e.g. webpack.config.js) under the carpet. Which is handy in most cases, unless you decide to do something fancy (like switch package manager). In Create React App one can bail out from this behavior by running yarn eject or npm run eject, but on Vue CLI platform you are locked in. So there's no straightforward way to make all underlying config files to appear and fix the faulty bits in them.
To be contunued?..
I was recently assigned a new project that uses Angular5 on frontend and Laravel on backend. I had no experience with Angular5 so I went through this entire tutorial without any issues. There is no backend and ng serve is used to serve the project. Only when I make updates to components/html/scss/etc files do I see changes to the served local UI - no changes to the local project UI are observed when I make changes to the main.js file within the dist folder after ng build, but changes made to the components/etc. are observed as updates in main.js after ng build. I was under the impression this is the expected behavior.
However, for my inherited project (which I put on my local machine via a simple git clone), the opposite is true. When I run locally, I use php artisan serve. All edits to blades are reflected in the served local project. However, for the "Angular-controlled" portion of the project, only when I make updates to the main.bundle.js file (without using ng build nor ng serve) within the dist folder do changes register in the served local UI - no changes are observed on the local project UI when I make edits to the components/html/etc files.
Can somebody please tell me what the heck I am missing here? What do I need to do to have edits to my local components/html/scss/etc. files reflected in the served local UI on the inherited project?
The inherited project was git cloned so this is how it was before I made any edits. I would imagine that development work is supposed to be done on components/etc. directly, not on .js files within the dist folder!
PS - No 404- or 500-level errors when inspecting the inherited project
In the project directory, updating npm using npm update and then running ng serve did the trick.
I'm using the latest vue-cli version 3.0.
My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.
I would like to be able to just open the index.html file on the browser. How do I go about doing this?
I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.
In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
I had to configure it to empty string like this so that it uses relative paths:
module.exports = {
publicPath: '',
}
PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL
I was using the history mode of vue-router, which does not work
on a local file system to route the paths back to index.html. So I
omitted the mode to go back to the default hash mode.
I was able to fix this issue by manually changing the url of the referenced files.
It's a bit of a pain, but this was a solution without having to mess around with the build configuration.
What you need to do:
Open index.html
Find href=/ and replace with href=
Find src=/ and replace with src=
NOTE: I was in need of this solution because I was creating a Phonegap app.
You can use the http-server module
npm install http-server -g
http-server dist/
normally the server starts at port 8080 so you can serve the build app on http://localhost:8080