I have a Nuxt3 (nuxt#3.0.0-rc.8) app using Vite (#nuxt/vite-builder#3.0.0-rc.8). I am developing from within a docker .devcontainer.
When I run yarn dev the devserver spins up and listens on port 3000 and everything works great. However when I change any file (e.g. a .vue component) I see the change hot-module-reloaded into my browser instantly, which is the behaviour I want.
BUT the devserver also sees the change and restarts itself.
I have a server route setup:
./server
routes/
my-route.ts
which does an expensive operation when first run, and caches the result for subsequent requests. Since the devserver restarts on every change, this expensive operation happens on every change, making dev quite slow.
So every change to a clientside .vue file results in the following server log:
✔ Vite server built in 397ms
Starting expensive operation from my-route...
...done in 123 second
How can I make it so only changes inside the ./server/ folder, or to nuxt.config.ts, or to plugins/*.server.ts etc will cause the devserver to restart? And other changes to clientside components will leave the server running and use HMR?
Related
Apparently:
nodemon helps with changes to the files (e.g. you make changes to index.js)
pm2 and forever keep the app running if you close the terminal, and can restart the app if it crashes.
But: What is the best combination or tool (and how to use it) to
Start the node app automatically on system boot/reboot
Restart the app automatically when changes are done to the files?
I have a deployment that includes an Angular project. To test my Angular project, I use ng serve which hosts its own fast-updating server I can connect to. For development, I save and edit these files very frequently. Because this image is used in my Skaffold deployment, that means Skaffold is constantly rebuilding and compiling my angular project.
For times that I'm not actively updating the Angular side of things, I'd like it to just build the most recent files and then never check for updates on them again until I run skaffold dev again.
Currently the skaffold.yaml looks like this for the Angular image:
- image: angular
context: ../Images/angular
custom:
dependencies:
ignore: ['../Images/angular']
This successfully runs the angular image once and then never checks for updates to it again, but if I make changes to it, stop Skaffold, then run skaffold dev again, it doesn't rebuild the image.
I understand why it's doing this, it makes sense and is expected. But I'm wondering if there's a better way to handle the building of images for images that change rapidly while developing them, such as Vue/Angular/React. Or maybe there's a better way to define files as being ignored from changes during skaffold dev rather than all changes even between runs.
The main reason I'd like to stop the constant building it to save laptop battery.
Skaffold supports other trigger modes including a manual trigger mode:
skaffold dev --trigger=manual
Skaffold will then wait for you to hit enter to initiate the next dev rebuild.
An alternative is to use the Skaffold Control API to toggle the auto-building. For example, you can use the REST API to turn off the auto-build:
curl -X PUT -d '{"enabled":false}' localhost:50052/v1/build/auto_execute
You can then re-enable it as you desire. You can use the Control API to toggle auto-deploy instead if you want the images to be built but not deployed (e.g., to see build-time errors), and you can also manually trigger builds/deploys/sync too.
You can find out the control port by running skaffold dev -v info; the gRPC port is normally 50051 and the REST port is normally 50052:
$ skaffold dev -v info
INFO[0000] starting gRPC server on port 50051
INFO[0000] starting gRPC HTTP server on port 50052
INFO[0000] Skaffold &{Version:v1.23.0 ConfigVersion:skaffold/v2beta15 GitVersion: GitCommit:e8f3c652112c338e75e03497bc8ab09b9081142d BuildDate:2021-04-28T00:55:12Z GoVersion:go1.14.14 Compiler:gc Platform:darwin/amd64}
...
Or you can explicitly configure a port:
skaffold dev --rpc-http-port=50099
For older versions of Skaffold, you may need to explicitly turn on the RPC mode with --enable-rpc.
If I make a node.js code change and upload the file via ftp, the changes don't seem to take effect until I run pm2 stop app and then pm2 start app. I am pretty sure that isn't the way it should work as this means a period of downtime every time you need to make a change. I found this in the documentation:
Hot Reload allows to update an application without any downtime:
pm2 reload all
But wanted to confirm that this is what I need to use?
According to docs. You can do pm2 start app.js --watch.
with --watch flag it will start watching for changes in any file in directory
PM2 can automatically restart your application when a file is modified in the current directory or its subdirectories:
pm2 start app.js --watch
I am trying to deploy an application I am building with the MEAN stack to Heroku and am having some trouble. I think the issue is with the structure of my application. I have all my server code in a folder called server, which has its own package.json and src folder that contains the actual server code.
Right now I am simply trying to get Heroku to deploy the client side of the application. I am only getting an error... I know that the database and server are not running but I cannot even get past the initial displaying of the app. I have one web dyno set up to run ng serve (npm start) on the app.
If someone would be willing to look at the structure of my application and sees why I am unable to deploy to Heroku without really digging into the code, that would be much appreciated.
Here is the code
Please note that it is on the deploy branch, and this is on purpose. I do not want to push anything to the master until I am sure it is working.
The Angular web server targets localhost:4200 by default. That can be changed with a couple command-line options. --port accepts a port and --host accepts a host IP address.
So you could modify the ng serve script as follows: ng serve --host [host-ip] --port [port-number] --disableHostCheck. That last flag (--disableHostCheck) tells the dev server to bypass host checking when normally ng serve fails on anything except localhost. Terrible idea if meant for anything except private development/testing.
Another issue: Heroku runs off web dynos and from what I understand about them, they use a random port and IP each time. While the random port is stored under the variable $PORT, the IP does not seem to have a similar variable. Web dynos keep that information to themselves.
Heroku does offer this command: heroku local web. It runs your application on localhost:5000. That means ng serve --port 5000 works perfectly with this command. This should tell you how your front-end will run on Heroku. Your angular dev server will function as expected too.
For actual deployment to Heroku, use that express server of yours. Run ng build from your file system and it will spit out an index.html in the dist folder. This file holds your entire front-end application. You can then upload that file into your browser from the server.
For express that usually breaks down into:
app.get('*', function(req, res) {
res.sendFile('path/to/index.html');
});
Hopefully this helps! Let me know if I missed the mark anywhere.
I have a Yeoman web app up and running. It fails to retrieve livereload.js and can take up 21s before timing out and the page then goes on to load.
I don't even need the livereload functionality. This is a web app that is finished with development.
I use forever to start the web app. I navigate to the root folder of my app which contains my Gruntfile.js. I then run the command - forever start /usr/local/bin/grunt
What do I need to do to disable this livereload functionality?
You can disable running livereload server from the grunt file. However, that will still load the livereload js file in website footer and result in very slow page loads.
The reload script is being added from the server side. Edit the file server/config/express.js and comment out the line:
app.use(require('connect-livereload')());
Note: You seem to have bigger problems as well. You said, the site has completed development, but livereload works which is possible only when the server is running in development mode(unless you have edited Gruntfile to that effect). What you need is grunt serve:dist instead of simple grunt serve. Running the server in dev environment is a security as well as performance problem.
PS: I started with a similar set up but found later that sometimes the app.js will throw an error while grunt will continue running. This will put forever useless. You shall need the grunt-forever npm module to make sure forever is monitoring the right file.