mORMot Open Source

ulrichd

Member

Registered: 2018-07-30

Posts: 16

Seeking advice: mORMot + Vue.js app

Looking for some advice on how to approach a project with mORMot serving as the back-end to a Vue.js based front-end.

We currently have a working application that uses mORMot MVC templates to serve a browser based UI, with some interface based code to do the required work on the server.  The plan is to upgrade the UI using Vue.js.  Since this would shift the view and controller part to the client, the server would only need to server static files.

What would be the best approach?

Drop the MVC part, keep the interface code and have mORMot server the UI as static files?

Use a dedicated web server (e.g. nginx) to serve the UI files, only keeping the mORMot interface code?

Or another, even better approach?

Any insights are welcome.

ab

Administrator

From: France

Registered: 2010-06-21

Posts: 14,656

Website

Re: Seeking advice: mORMot + Vue.js app

I guess what you call "static files" won't be fully static.

The HTML + JS + resources would be static, but the Vue.js would need a REST endpoint on the server to get the data, e.g. using Agios.
For such a REST service, a mORMot interface-based service would make sense.

And in practice, we put a nginx server as front-end, for https processing (e.g. using Let's Encrypt), and also static content publishing.

ulrichd

Member

Registered: 2018-07-30

Posts: 16

Re: Seeking advice: mORMot + Vue.js app

Hi ab,

yes, the front-end will call REST endpoints where appropriate.

I had started experimenting with a mORMotHttpServer Request override, but it looks like I would have to handle everything myself that way (correct me if I'm wrong), including session management and paying attention to when it's a static content request and when it's a REST call (since I used '/' as the additionalUrl in the Create call).

I'll explore the idea of using nginx to serve the front-end.

Thanks for sharing your insight!

mpv

Member

From: Ukraine

Registered: 2012-03-24

Posts: 1,571

Website

Re: Seeking advice: mORMot + Vue.js app

Yes, nginx is a perfect choice. Latest Socket based HTTP server + nginx as a reverse proxy is perfect even on Windows.
I recommend to use a separate location for static files served by nginx itself (with gzipping and http cache) and proxy all other URLs to mORMot backend using proxy_pass
Simple config:

  # handle static by nginx 
  location /static {
    root /var/www/html;
    try_files $uri $uri/ =404; 
  }
  # proxy all other requests to the mormot backend
  location / {
    proxy_pass   http://mormot.backend:8881;
    proxy_set_header    Host    $host;
    proxy_set_header    X-Real-IP  $realip_remote_addr;
    proxy_redirect      off;
    proxy_intercept_errors on;
}

Good nginx configuration boilerplate

ulrichd

Member

Registered: 2018-07-30

Posts: 16

Re: Seeking advice: mORMot + Vue.js app

mpv,

was already thinking along those lines.  Thanks for sharing the config sample and the link!