Several problems with self-hosted Vapid



I gave up early on installing Vapid on Windows and instead installed it on an Ubuntu 18.04 server (no Virtual Machine). I guess I ran into every problem described in the issues and this forum - plus some more. It’s up and running now, but I still have some problems. Although being a developer, until now I used node.js only locally for running Gulp and Webpack, etc.

The status quo:

  • Ubuntu 18.04

  • node.js 10.15.3 / npm 6.4.1 (installed using a using NodeSource repository)

  • Vapid 0.7.2 (I just saw there’s a 0.7.6 version out now)

  • Apache proxy (sorry, I can’t use nginx on the server):

    #SSLProxyEngine On
    ProxyPass /.well-known/ !
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/

  • For the moment I start vapid with vapid start . and call the proxy domain via HTTP

That way it works (apart from livereload, but I can live without it).

One little thing: The WYSIWYG editor (Quill) works, but seems to have problems with line breaks. Pressing <Enter> creates a new paragraph, which is fine, and pressing <Shift>+<Enter> creates a line break (<br>), which also works correctly on the frontend. But as soon as the dashboard page reloads after saving, the line breaks have become paragraphs again, and saving now after a small change reformats the frontend page, too.

Apart from that I’d like to configure the editor myself (add / delete buttons and formats). Is that possible without hacking Vapid itself?

Now changing anything in order to make the site production-ready makes things much worse.

  1. I’m using an SSL certificate for the proxy domain (Let’s Encrypt). As soon as I call the domain via HTTPS, the WYSIWYG editor vanishes completely, leaving a box behind that offers no possibility to edit the contents. I guess that’s because of the mix of HTTPS (proxy domain) and HTTP (localhost). Would it be enough to create a self-issued certificate for localhost and call https://localhost:3000 in the proxy? Or does it have another reason?

  2. I installed PM2 for letting Vapid run permanently. This works only partially: The dashboard loses its styles (error message in the Developer Tools console: “Refused to apply style from ‘http://mydomain.tld/dashboard/stylesheets/dashboard.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled”). When I set NODE_ENV to production, both the dashboard and the frontend lose their styles.
    I guess at least the frontend’s styles are compiled on demand when NODE_ENV is not set to production. But, well, how do I tell Vapid to save them? I could set up Webpack locally to compile the CSS and the JavaScript, but since Vapid already does all that, this seems a bit ridiculous to me… So, do I have to hack the Webpack configuration to achieve this? Also a bit strange, I think. There must be some other way…

I hope someone can push me into the right direction. I’ve already spent so much time with this that I wouldn’t want to give up now. :wink:

Thank you very much in advance! :slight_smile:



Okay, I just updated to version 0.7.6, and at first this seemed to solve problem #1 - the WYSIWYG editor showed up even when I called the site via HTTPS. After some tests with PM2 suddenly the editor vanished again, although I deleted the PM2 applications and used vapid start . again. I did empty the browser cache, so that’s not the problem here.

Any advice would be greatly appreciated. :slight_smile:



Okay, I guess I’ll have to return to October, which is a nice system for small sites, too. It’s a pity because I like the idea behind Vapid very much. I’ll check back in a year or so, maybe some things will have been sorted out then.

Thanks anyway!