How a Vuejs front-end web app lives in the same host/domain as my server does?

Question

I'm having a hard time figure it out the differences between a Vuejs front end web app and my server written in node, when my app is done can I upload my server to the same domain where my web app lives? can an API make calls to my server? lets say my miwebsite.com?

What I am trying to do is a single page app aka (PWA) that has two routes which Vuejs handles, the home page which I assume will be (miwebsite.com) and (miwebsite.com/admin), the data gets fetched making api calls to my server, but again I am kind of confuse with all this terms like server side rendering and client side rendering, I know that server side rendering is that you have diferents pages and for example you have a route with express pointing to an about page this gets render right? and client side rendering is you download all content with the first call and then later on update the page with user actions through api calls.

But what is the difference between for example a domain that looks like this api.mywebsite.com and mywebsite.com? do they live in the same domain-name/host?

Answer 1

In the end, it's your web server that determines what to reply for a given HTTP request. For the Vue part to work, your web server must serve up an HTML page that references a JavaScript bundle that contains your application and potentially its dependencies (Vue in this case). You should therefore configure your web server's mywebsite.com virtual host to respond with such an HTML page for both the / and /admin paths. With most default configurations, it suffices to point to a directory that contains an index.html alongside dependencies (for example scripts/app.js and maybe scripts/vue.js).

For API calls to work, there are two common patterns:

• Nest the API on a seperate path on the same domain (mywebsite.com/api). In that case you should configure your web server to forward all requests to the /api path to a separate back-end service. In Apache you might use mod_proxy, in Nginx that's mod_http_proxy.
• Host the API on a separate domain. (api.mywebsite.com). In that case, you also configure a reverse proxy, but for the whole virtual host.

Note: the above assumes that your back-end lives in a separate service from your web server. If you would like to use eg. mod_php, you will need to use a bit of URL rewriting (mod_rewrite in Apache) to achieve the same.

Answer 2

From my experience hosting the API on a separate domain is the best way. Because VueJS and related single page application(SPA) technologies are hugely based on caches. It means once you enter SPA then your browser caches your web, and after that, all of your static routes also cached on the browser and it never sends to backend again. If you host your API on domain.com/API and doing port proxy on Nginx or apache server and your SPA run on domain.com then the first time it works fine but after your browser caches, it will never send static routes to your API. So using a separate domain is the best way.