Combine Yeoman Server and Node Supervisor - node.js

I'm using Yeoman to develop the frontend html app (backbone and bootstrap) and would like to use the same folder for backend development for the api (node, express, mongodb).
What I would like to do is to have the browser refreshed no matter what file was changed on frontend or backend.
What I'm doing now is:
For Yeoman I'm using the "yeoman server" that would refresh the browser every time I change something in the app folder.
I'm using the node supervisor module and executing the "supervisor server.js" for automatically kill the server and relaunch the node server if file is changed on the backend.
I'd like to avoid this as I need to run the yeoman and node server on different ports.
Is there a way to force autoreload of the browser with node supervisor or use the yeoman server as a classic node server?

You should be able to force the browser to reload with command grunt reload. Just childProcess.exec or childProcess.spawn the command.

Related

Load node JS Web app so slow in VPS with pm2

Im using pm2 start app.js --watch but it's very slow to reload my web app. It always must to refresh the browser for get the page fast. What should i do?

How to run Node Js application on apache server

So the problem is i'm running spring boot project on a linux server. So, on that server
the URL of that project is - https://project-name
Now i want to install a Node js project on same server
Node js project link- https://github.com/WPS/domain-story-modeler
The node js project is running on 9013 port
So, if someone hit the https://project-name/domain-story-modeler it should redirect to node js project
for that i have used reverse proxy of apache which will redirect to node js project
ProxyPass /domain-story-modeler http://localhost:9013
ProxyPassReverse /domain-story-modeler http://localhost:9013
And i run the node js project using pm2
pm2 start "npm run dev" --name domain-story-modeler and it run
The issue im facing currently is if i hit the https://project-name/domain-story-modeler it is accessing the node js project but only able to show index.html file and unable to access rest of the file like css , js, images and all
So, i want to know why is these happening.
If you want more details about issue i can provide
Thanks guys ,
But i found the solution
The issue was the url i was hitting is https://project-name/domain-story-modeler
and image tag in index.html file has path from logo folder
when i updated it with the project folder everything start working

Heroku deployment confusion: Vue.js frontend with Flask backend

I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.

how to start ionic app and nodejs server together

I have ionic application and nodjs server app. Both application clubbed as a single application.
At present I start application by two cmd (one for starting the nodejs server[node server], next for starting the ionic app ['ionic serve'])
I just need to how to start the applications together in single command
please help
If you are looking for a way to execute multiple commands at once, then you can do something like this:
node server; ionic serve
Or:
node server && ionic serve
The first one executes node server first and then ionic serve without checking whether node server had any errors or not and the second one will only continue with ionic serve if node server is successful. There are more options to choose from and you can find them here.

Programmatically watch and restart node server

I was getting tired of using FileZilla every time I wanted to push a change to my server hosting my website and so I set up a github repo and linked it to my server so that changes and pushed right to the server.
However, my backend is written in node and so each time I update my server.js file I have to restart the server. With "node server.js"
Is there a way to watch the file and programmatically restart the node server when an update is detected?
If it helps, my serve is Ubuntu Linux running apache2
You could try writing something yourself, or use one of the popular libraries that are already out there:
https://github.com/petruisfan/node-supervisor supervisor server.js
https://github.com/remy/nodemon nodemon server.js

Resources