I currently have this script in my package.json, for building the app to work on the cdn:
"build:cdn": "ng build --prod --extract-css --output-hashing=none --deploy-url https://my-cdn.com/static/20181118000000/frontend/dist/"
Where 20181118000000 is simply the convention for cache busting.
But that means that every time I want to build, I have to manually edit that value in the build:cdn script in package.json. Not to mention that I can't have the app running in watch mode...
How can I tell npm to dynamically compute that when running the command? Like --deploy-url https://my-cdn.com/static/{getCurrentTimeStampHereAndFormatItTo('YYYYMMDDHHMMSS')}/frontend/dist/ whatever.
Especially since I would also like to use npm run build:cdn -- --watch to have it watching and build automatically when saving a file, while developing. Because local development also uses CDN - don't ask why :( - but it's a VM in the cloud, and with EACH change the code is automatically uploaded (thanks to WebStorm) through ftp to that development VM in the cloud, then I can refresh the browser to see the changes. Apparently, people preferred this over the Docker filesystem issues with mounted folders being slow.
Ideally, the solution should work on both Windows and Mac OS.
Related
Basically what I have is my frontend (Vue) and my backend (Node.js and etc.). By following a guide, I've built the frontend for production using npm run build. I got a bunch of files in a build folder I setup within a previous step. These files were then moved to a folder in the backend. It works, but it's more a demo than anything else, and the frontend and backend will have to be modified more as I continue.
I'm just wondering if and when I edit the fronted more (let's say, when I add a new page) am I supposed to go through this process again? So I'll modify the front end folder, build that, move files, etc.
Thanks.
Yes, definitely.
If we are in a development environment, we use npm run dev or yarn run which upholds the development environment running and updates the browser whenever any modifications inside the code happen. We don't use any final build in the development environment because we make code modifications so repeatedly that it would be a sore process to make a build after every modification and check the results using that build.
But, the production is distinct from the development environment. We deploy the only code which is bug-free, entirely working, and ready for users to use. Deploying to production means all changes have been made, and the final code is ready to be deployed. So, we make a final production build and deploy it to our server.
So, don't panic to deploy to production every time you make a small change in the code. First, complete your all changes, and test the changes in the development environment, if everything is working correctly then only create a final production build, and deploy it to the server.**
I hope this helps.
I have VueJS project published on Netlify, what i want to do is to make modifications to this project and see my changes locally before i update the repo on GitHub and publish the changes on Netlify. So simply i'm trying to find a way to serve the project locally but this doesn't work anymore after the project got published on Netlify.
Whenever i run npm run serve i get the below error:
PS F:\Projects\reaction-timer-testing> npm run serve
> reaction-timer-testing#0.1.0 serve
> vue-cli-service serve
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
I assume this is because that project is in build mode and i did that by running npm run build while i was publishing it to Netlify.
I've read someone recommends to run serve -s dist and this got me no where because each time i visit the local link http://localhost:3000 it gets 404: the requested path could not be found.
Another one advised to download and install xampp but i don't know what to do next i think i've tried everything.
Here is a view of my project files (it's a very simple project that i made for learning)
Pic of project files
Link to the project on Netlify: https://reaction-timer-testing.netlify.app/
I have a project that exports a package to be used by other projects (some infra code).
I've published it in a local repo, and then installed it on my main project.
I need to keep working on that infra project, and to have it updated in the larger project. I have no problem running scripts to do that - but I don't want to increase its package version and to keep publishing it on any change.
I know about npm link and I've been trying to use it, but it seems that some caching in WebStorm causes it to not update in the main project. I actually need sometimes to invalidate caches and restart the IDE after changes to the infra package - and that's a large time consumer.
Is there a way to tell WebStom "for this npm package I want you to use this path instead of the actual npm package"? Or to use the "Attach project" feature to do that when both are open?
Edit: After working like that a bit, I've discovered that the need to invalidate cache is related only to TS related changes - meaning when I add classes or change signatures. I can write the correct code and it works - but TS shows errors and no autocomplete until I invalidate the caches. And restarting TS service doesn't help.
Is there a way for Hot Reloading to occur on a local npm dependency of a local Vuetify application using yarn serve (which is probably using webpack / vuetify-loader)?
BUSINESS CASE
We have some common Vuetify components that I'd like to expose with a "common-components" Vue Plugin and allow all of our Vuetify applications to pull those common components. I'm able to do so by packaging the plugin and creating the dependency and pushing to a private npm repo or a commit/push to a private git repo. The problem lies with the development cycle and development experience.
A typical development change to the Plugin within the local development environment requires:
(common-components) yarn build (to create the dist/common-components.umd.js)
(common-components) (deploy to a private npm rep or a commit/push to a git repo)
(application A) yarn upgrade common-components to pull the latest
(application A) yarn serve
There has to be a better development cycle than this, right? Or is my real problem that we need to decouple the plugin from our applications better?
THE SOLUTION I WAS HOPING FOR, BUT FAILED
yarn-link or npm-link
I was able to get this to work, but a NPM dependency still resolves to the folder's package.json which has a "main": "dist/common-components.umd.js". This requires me to do a yarn build which removes the file and rebuilds it. When the file is removed, "application A" that is currently running with yarn serve breaks and is unrecoverable. I must shut down the server and do a yarn serve again.
I'm hoping there is a solution out there that tackles this scenario!
I've done that kind of setup a while ago thanks to yalc.
It was essentially:
work on your own package, setup it (with yalc link if I remember properly)
when an update was done on the package, we had it to automatically yalc publish --push --changed like with a linter
you can use a pre-push git hook to babelify your package
on the host main app, we had a nodemon running to check if yalc published any changes, and if it was the case, simply reload the app
on main app still, we used a git hook on pull to have it fetching the latest changes on the yalc.lock store (with yalc update)
I did it a while ago so I don't remember it super well but it was working pretty well as far as I remember, just need to run 2 servers (one on the package to publish and one on your main app to fetch the changes) on top of your other services. Still works better than it's yarn or npm links.
I would like to run a user-level script or command after any time that I run npm install on a project on my computer. A similar concept to npm-postinstall but configured on a global / user level. Is this possible?
My use case: on Mac OSX, Spotlight is using serious energy to index my node_modules, I would like to automatically add a .metadata_never_index file every time.
Open to yarn solutions as well.