Self Hosting Vapid


#1

I was looking for documentation about self-hosting the Vapid site on providers like https://zeit.co/ or AWS or Digital Ocean. Does anyone have a successful experience doing this?


#2

I’ve tried deploying to Netlify but not completely sure what and where I should be doing with package.json and any start commands… In theory should work.


#3

Tried with Heroku and Netlify with no luck. Another thing that put me off with Heroku was the fact that according to their documentation, Heroku does not support images.

The only way I’ve used it outside of localhost was using a Virtual Machine. I installed Vapid on a Windows 10 VM with Paperspace, then provisioned IP (you can use Ngrok Pro too)

Then CName that account to my CPanel Hosting. It seems to work that way but its waaaaaay to expensive to go through that route.

Also noticed that Vapid seems to go blank when embeded into Iframe, and AJAX.


#4

Hey, everyone,

Sorry, I understand how frustrating this can be. Setting up production-ready Node.js apps can be difficult, and the steps can vary by host/service, but let’s try taking them one by one, and then if we see some success we can update the self-hosting wiki entry.

Firstly, let’s walk through a proof of concept on DigitalOcean:

  1. Create a new droplet

  2. Get your site code onto it (via Git, scp, or however you like)

  3. SSH into your instance

  4. Install Nodejs

    curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
    apt install nodejs
    
  5. Change into your site’s directory, then install the modules listed in package.json (in this case, it’s just vapid-cli):

    npm install
    
  6. Depending on how you transferred your files, you may need to recreate a couple of files/folders. If the data folder is missing, create it. If the .env file is missing, recreate it and add your SECRET_KEY.

    mkdir data
    echo "SECRET_KEY=yoursecret" > .env
    
  7. Start the server

    npm start
    

From there, you should be able to visit your droplet’s IP address on port 3000 and see your website. Let me know how that goes. If it’s a success, we can discuss other topics, like changing the port, using PostgreSQL, running the service in the background, etc.


#5

Tried this option but I’m stuck with Digital Ocean, they did not accept my card. I would appreciate if someone can give this a go, and tell me if it works, I might consider other options of getting accredited by Digital Ocean if I get positive replies about this step.

About changing the port, I got this error while trying start to different vapid projects, because it actually uses the same lcaolhost 3000; so I will be interested in seeing steps of getting this done.


#6

I got it working - I only have one site running, but it’s working behind Nginx with a reverse proxy, like so:

location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

I haven’t yet looked into how to restrict accessing the :3000 port to Nginx only, but I know it’s possible and I plan on doing that later.

I can imagine there being issues with multiple sites, though, since the port is hardcoded into Vapid afaik. A -p flag or something for specifying ports would be nice.

Edit: I got it running in the background using a modified form of this init script template. I’m also not sure anymore that I can actually restrict access to the port to nginx without modifying Vapid itself - I think server.listen itself has to be set to the loopback IP.


#7

I have gotten everything installed, got it run but when I run npm start I get what looks like webpack issues with the scss/css and js. Site shows up and I can access the admin and change text but currently no styles are showing for website or admin



Sass error: no such file or directory, scandir 'node_modules/node-sass/vendor'
#8

For Heroku, I think a switch to PostgreSQL is mandatory. Any tips on how to achieve that?


#9

That looks like an issue with a module - try deleting the node-modules folder and re-running npm install.


#10

I haven’t tried it, but the Github wiki has some instructions here: https://github.com/vapid/vapid/wiki/Self‐hosting


#11

cool, I think it was definitely an npm permissions thing. I had to uninstall nodejs then install it through nvm. So when I run npm start I no longer receive those errors but I still dont think the scss is compiling


#12

I got it working too, partially with this tutorial

Some differences: I didn’t setup ssl or a domain name yet. Also to get pm2 to work I had to use
pm2 start npm -- start. to run a ‘npm start’ type of script instead of a ‘server.js’ entrypoint. (Getting pm2 to work was not necessary though)

I’m hoping to get managed hosting and the project is only an example. Precisely because I’m not sure about the benefit of pm2 and I’m not sure what additional steps I should take next. Is it important to restrict access to port 3000 like wbiggs said? Why would it be needed?


#13

It’s mostly an issue when you’re hosting multiple sites - if you’re using Vapid for your myportfolio.com site, you don’t want, say, businessclient.com:3000 to go to your portfolio.


#14

@ Hadr619 Try npm rebuild node-sass. Hopefully, that should resolve the styles issue.


#15

That didn’t work, I no longer get errors in the console when running npm start after installing nodejs through nvm, but the website site still doesnt compile the scss


#16

Sorry to hear that. I created a new thread for us to discuss the error, since it seems to be veering a little off-topic from self hosting. Please join me there, and we can continue to troubleshoot.