Quasar SSR ⚡ deployed on DigitalOcean 🏄 using NGINX and PM2.
View Demo
·
View 360 Panoramas
·
Report Bug
·
Request Feature
Check out the other tech stacks I use at Stack Share
Working with Quasar CLI has been a game changer for my development and deployment work flow. This README documents the deployment of a Quasar SSR build on DigitalOcean using PM2 and NGINX.
Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.
Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.
Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.
Ask questions at the official community Discord server: https://chat.quasar.dev
Ask questions at the official community forum: https://forum.quasar.dev
For latest releases and announcements, follow on Twitter: @quasarframework
Head on to the Quasar Framework official website: https://quasar.dev
- Write README.md
- Replace placeholder images with gifs
- Setup Prettier
- Clean up folder structure
- Create 1 template card to replace the cards used for each room
- Move hard coded data from cards to external JSON file
- Move all project example images to Cloudflare CDN.
- Update contact page
SPA Build deployed on LAMP stack
SSR Build deployed on DigitalOcean using PM2 and NGINX as server proxy
NetData is distributed, real-time, performance and health monitoring for systems and applications. Netdata is free, open-source software and it currently runs on Linux, FreeBSD, and MacOS, along with other systems derived from them, such as Kubernetes and Docker.
httperf is a tool 🔨 for measuring web server performance. It provides a flexible facility for generating various HTTP workloads and for measuring server performance.
I am developing a test to demonstrate the load on our servers at the start (3,000 concurrent connections) of a University Football 🏈 Game. We see the largest amount of traffic 15 minutes before the game begins, and half time when the fans are using our Login Portal to access the free WiFi service my company provides at the games.
Traduzco del inglés al español.
To get a local copy up and running follow these simple steps.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g- Clone the repo
git clone https://github.com/Mary-Tyler-Moore/venues-production.git- Install NPM packages
npm installquasar build -m ssrquasar ext add @quasar/icon-genie
Node.js Deployment (Currently a WIP!)Steps to deploy a Node.js app to DigitalOcean using PM2, NGINX as a reverse proxy and an SSL from LetsEncrypt
If you use the referal link below, you get $10 free (1 or 2 months) https://m.do.co/c/5424d440c63a
I will be using the root user, but would suggest creating a new user
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install nodejs
node --version
There are a few ways to get your files on to the server, I would suggest using Git
git clone yourproject.git
cd yourproject
npm install
npm start (or whatever your start command)
# stop app
ctrl+C
sudo npm i pm2 -g
pm2 start app (or whatever your file name)
# Other pm2 commands
pm2 show app
pm2 status
pm2 restart app
pm2 stop app
pm2 logs (Show log stream)
pm2 flush (Clear logs)
# To make sure app starts when reboot
pm2 startup ubuntu
You should now be able to access your app using your IP and port. Now we want to setup a firewall blocking that port and setup NGINX as a reverse proxy so we can access it directly using port 80 (http)
sudo ufw enable
sudo ufw status
sudo ufw allow ssh (Port 22)
sudo ufw allow http (Port 80)
sudo ufw allow https (Port 443)
sudo apt install nginx
sudo nano /etc/nginx/sites-available/default
Add the following to the location part of the server block
server_name yourdomain.com www.yourdomain.com;
location / {
proxy_pass http://localhost:5000; #whatever port your app runs on
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;
}
# Check NGINX config
sudo nginx -t
# Restart NGINX
sudo service nginx restart
You should now be able to visit your IP with no port (port 80) and see your app. Now let's add a domain
In Digital Ocean, go to networking and add a domain
Add an A record for @ and for www to your droplet
I prefer Namecheap for domains. Please use this affiliate link if you are going to use them https://namecheap.pxf.io/c/1299552/386170/5618
Choose "Custom nameservers" and add these 3
- ns1.digitalocean.com
- ns2.digitalocean.com
- ns3.digitalocean.com
It may take a bit to propogate
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
# Only valid for 90 days, test the renewal process with
certbot renew --dry-run
Now visit https://yourdomain.com and you should see your Node app
I hope this is useful to anyone working with Quasar and VueJS. I'd also like to provide an easy way for folks to share 360 panoramas.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the Creative Commons BY-NC-SA License. See LICENSE for more information.
- I want to thank nothingismagick for writing this guide.
- I want to thank Brad Traversy for providing this gist that I used as a reference.
- I also want to thank Nisgrak for helping me correct errors in my Spanish translation.