I want to know the best practices involved in integrating nodejs and vuejs applications.
I looking at various options and I’m not sure which is the best
The best approach is to have a nodejs API in one place and a VueJS app in another and to communicate between both via API calls.
Not sure which other ones there are.
└───your-folder
├───api // Your Nodejs server
└───client // Your Vue app
Create a folder like this. Now start your Node API on any port (for example 3000) and then start your Vue app on different port (for example 4000).
Now you can send any request (GET, POST, PUT etc.) from your Vue app to your Node API. In our case API origin is http://localhost:3000
Related
I am beginner in web technologies. While studying about frontend frameworks, I came to know that we run separate application servers for frontend and backend server(API).
e.g. If I am using vue.js, I'll be running a vue server for frontend and I'll be running another MEAN stack API server separately. Now my application will need to show real-time updates, I'll have to use websocket connection between my browser and frontend server which further will need websocket/webhook connection with my backend server(API). Now I am already aware of the scalability and session management issues with websocket connection. In this scenario, how should I build my application for better scalability and with less complexity? Is it possible to create a monolithic application server for frontend and backend? Will that be a good choice?
Is it possible to create a monolithic application server for frontend and backend? Will that be a good choice?
That choice is fine; start simple and you can break into microservices in the future. Unless this is for a large production system!
If you use something like express you can serve the Vue.js files using express.static, API endpoints using express.Router() instances, and the ws or socket.io module attached to express instance for websockets.
Now my application will need to show real-time updates, I'll have to
use websocket connection between my browser and frontend server which
further will need websocket/webhook connection with my backend server
This isn't the case. You can have your frontend (the app running in a browser) connect directly to the backend via websocket if you wish, no need to proxy via a frontend server. For session management look into JWT tokens.
You can go for socket.io library in Nodejs. It's simple and easy to use, The scalability and session can be handled by introducing Redis,
check https://socket.io/docs/using-multiple-nodes/
Basically, I was following a course that used a next js frontend and a node js backend API so now I wanted to deploy it to a server but the only way is to run them separately because next js doesn't have an anohter way to connect to the API like create-react-app.
so how is it possible? how do I proxy the requests? and is there's a better way to do it?
I am planning to build a new application with express (for frontend) and loopback for managing all APIs, hosted on different servers.
How would you typically architect this, would the app (browser) directly make http requests to loopback for data, or would all requests go through expressjs and user never interacts with loopback?
If its the former, how do you do session management? If its latter, would you need to recreate all routes even in express?
Would appreciate some help.
Disclaimer: I am co-author and a core developer of LoopBack.
LoopBack is using Express under the hood. Every LoopBack application is an Express application too, therefore you can use any Express compatible middleware (like session management) and define Express-based routes in your LoopBack project.
It's entirely possible to write a LoopBack application that's serving both REST/JSON API and front-end files, we have users successfully running this setup in production.
As for session management, I don't know what exactly are you asking about. In general, you handle sessions in LoopBack the same way you handle them in Express.
You may find the following resources helpful:
Defining middleware
Use cookies securely
We have a somewhat big nodejs app using express. We started experimenting with hapijs on smaller services and kind of like it more than express. So we'd like to migrate the express app to hapijs. But since the app is already big, and we don't want to do a complete rewrite at once, but rewrite it step by step, so we can do it in more time. Is there any way to use express and hapijs within the same nodejs process and do the routing between those to by routes?
You should go through on this link:
Hecks
It will show you how to mount your express app onto your hapi server.
You have a couple of options to do it:
You can run those in two separate servers under a HAProxy and decide which server will answer by the route.
You can run 2 separate servers where Hapi will be in charge on all the routes once the route is not found it will proxy the request to express.
Option 1 will have better performance and help you in the future when you need to scale.
I have this simple app (Node.js, Electron, Angular2, TypeScript) like you can find in any tutorial.
What is the best way to communicate from Angular2 to Electron and back?
Let's say you want to call a system dialog. How would you do that?
These are my main source files:
My main Electron file
My main Angular2 index
My Angular2 bootstrap file
My Angular2 root component
You can treat the main Electron file like a server running in node. Meaning you can communicate with it any way you choose.
You can spin up an express http server and create some API endpoints to hit from your Angular code on the client-side.
You could fire up a socket.io server and use a websocket for communication.
You can also just straight up use those APIs right inside your angular code if you don't care about mixing system code with client-side code. Only do this if your app will always be an Electron app and never ported to a web app. If it's ever going to be a web app then your client-side Angular app should stick to using only font-end javascript code and let the main Electron file act as a server.
Another way to go is communicate using ipc events. Use ipcRenderer on browser side and ipcMain on the Electron side. That's pretty much what I have done in my app (work in progress) https://github.com/sumitkm/electricedit/
However I used KO not Angular.