Two Irresistible Ways To Deploy Your Nuxt.js Application (Universal and Static)
ฝัง
- เผยแพร่เมื่อ 2 ต.ค. 2024
- 🚨 IMPORTANT:
Cllick here For the Nuxt Course : bit.ly/2LalQka
Nuxt.js is an amazing server side rendered application framework for Vue.js. In this video I discuss how you can deploy your app as a universall application or as a statically generated one!
► Want to check out the course! It's here! bit.ly/2LalQka
-----☆-----☆-----☆-----☆-----☆-----☆-----☆-----☆-----☆-----☆
► GET MY NEW BOOK VUE.JS IN ACTION - goo.gl/qohSPs
► LEARNING TO CODE? CHECK OUT THESE COURSES! (SOME ARE AFFILIATE)
THE WEB DEVELOPER BOOTCAMP (GREAT FOR BEGINNERS) - bit.ly/2zP4alw
THE ADVANCED WEB DEVELOPER BOOTCAMP - bit.ly/2h53MYg
THE ULTIMATE VUE JS 2 COURSE - bit.ly/2CTvsvx
ANGULAR 4 - bit.ly/2AG0IdP
CHECK OUT THIS COURSE - Angular 5 - The Complete Guide - bit.ly/2sCMxWm
CHECK OUT MY AMAZON STORE - www.amazon.com...
► REACT FOR BEGINNERS - bit.ly/2BctxOE
ES6 - bit.ly/2iF4YT3
LEARN NODE - bit.ly/2jKLYpE
___
► JOIN MY FACEBOOK GROUP AND START LEARNING CODE - / 190277791450732
___
► GET THE FIRST CHAPTER OF MY NEW BOOK Vue.js in Action! SIGN UP HERE! - bit.ly/2GWWuEw
GET MY LAST BOOK EMBER.JS COOKBOOK! - goo.gl/LEIdSc
GET MY NEW BOOK VUE.JS IN ACTION - goo.gl/qohSPs
___
Links
___
MY WEBSITE - www.programwith...
MY TWITTER - / erikch
MY FACEBOOK - / programwitherik
🚨 IMPORTANT:
Cllick here For the Nuxt Course : bit.ly/2LalQka
Instead of modifying the default nginx file, make a new one and move default out of the way. That way if something bad happens and nginx needs to be troubleshot you can fall back to it.
Thanks for the tip!
thank you for this tutorial and your time. great work
Hey Erik :) Love your videos :D Maybe you could do an in-depth video on deploying an SSR app on firebase hosting using cloud functions? Im sure there are plenty of people looking for a good tutorial!
Yeah that's a good idea! I'll look into it.
Yes I would really appreciate this aswell!
Im searching for that too.
i am agree
nice idea. hope you could make a video on this erik.
Thanks man. Been stuck on this for a couple hours. I think my main problem was that I was trying to use Apache instead of Nginx
Hello Erik, that's awesome you explain the things in a very easy way. can you please confirm the thing about global CSS files after build, in nuxt/dist folder there is no CSS folder is there, when I try to deploy my Nuxt app on Gcloud app engine, it is giving error like app.css file is missing. Please help me out with this.
I was wondering how to get a nuxtjs app working with apache2, but since you explain how to do it with nginx as reverse proxy I'm good to go, so thank you!
how one is suppose to deploy this on a regular basis? whats a good workflow to do this after a code update.?
Hey Erik, thanks for the amazing video. This video is the closest thing I have come across for deploying Nuxt with Nginx on EC2's Ubuntu instance. I wanted to ask you that if I had an AWS EC2 Ubuntu instance the deployment process should be pretty much the same right?
On static, if I refresh the page or go to a specific /page, the app breaks...
s*it frontend is so hard let me revert back to jquery pls
It didn't work for me. I'm using Fedora 33 and there's no any folder named sites-* . I've enterily followed your tutorial but even so I've only an error from nginx.
i want to deploy my nuxt app on aws server (apache)
It works perfectly good, have you try to hide the port using HTTPS config?
No....
thank you man
Hi Eric, I'm using a ubuntu droplet from digitalocean. I followed your steps and got my site up, but I'm experiencing some problems with my images. They all return 404 error as well as some js files from the build. What could I have done wrong?
Thanks a lot!!
For Nginx, when you just want to refresh the config file(s), you can run
sudo nginx -s reload
instead of stopping and starting the service. This will do a "soft reload", where it will stop and start only the refreshable services, or halt on any errors. It will not bail all services on error, only the one(s) that error out.
For example, if you got 2 configs and you make a mistake on one of them, only the failed config will be unavailable, while the other still runs.
This is much safer for production environments, where you might have dozens of customer configs. You don't want all customer sites to go down just because you made one mistake in one customer's file :)
Hi, great video, is nuxsj responsive by default?, thanks
If you are creating a new NGINX config file instead of using the default config file then you'll need to make a symblic link of the file in the sites available folder too
merci
This is the video I am looking for over a week. Thank you very much ❤ keep doing ✨
Thanks for de content. Helped me a lot
SSL????
Why do we need to install python on a server besides npm? just wondering.
Jinseok Oh I believe to build the package.json
@John Wanyoike node needs it
@John Wanyoike np bro
@John Wanyoike ooh i meant to say no problem bro :)
@John Wanyoike Hi John, how did you manage it?
Hi Erik. Thanks for the tutorial. After install PM2 the website is running OK. But i am struggling to run PM2 resurrect, after the server reboot. I tried all the available options but its not working. Can u make a video on the auto start of PM2 resurrect command. Thanks
I'll look into it!
@@ProgramWithErik For those who are interested, I also found that pm2 start npm -- start command won't work in windows 10. For more info stackoverflow.com/questions/50027163/pm2-start-npm-start-error
is there an nginx tutorial?
i have my application on server, but i need to find away to serve it on VPS server
Hi, I have the same problem, and I would like to find a solution. Did you find one?, pls share if so.
@@Asgallu Yes, I did. I followed this tutorial
th-cam.com/video/rVZo2FAjXtA/w-d-xo.html
Im really overwealmed by all this deployment for SSR websites. It seems so complicated for a beginner like me. I just want my website build with vue & nuxt to be SEO friendly. Also what is Static content? Why shouldn‘t I use npm run generate and upload the dist folder to a hosting like firebase? There is just so little Well explained Information on TH-cam and other platforms...
J fking W you run the generate command if you have just plain static html files, which is bad if you have dynamic contents and routes that comes from the api as the new data aren't generated yet. So if you have a new data on your api you have to run the command npm run generate again to create a static file for that dynamic data.
And try to use netlify to deploy static html pages.
I tried, and it was fun thanks
No Problem!
Hello Erik, how are u? Do u have any idea if these steps can be archive using IIS?
you are a HERO.
Great video.
If possible please do one, with AWS Lambda.
Does not work for me Erik! I did the exact same thing as you but on Digital Ocean. When I go to my domain the browser says "The page is not being redirected correctly"..
Hmm.. that's weird...
Nice video! finally deployed nuxt on ec2. Just from curiosity, I understand that in this case, the purpose of using nginx is to redirect port 80 to 3000. But I dont understand why I cant just change the port from 3000 to 80 without nginx("start": "PORT 80 nuxt start". Then you could "sudo npm start". On the console everything seemed to be working fine, but I couldnt access the server with port 80. With my node.js backend forcing port 80 with the script worked fine.
Nginx is more powerful then using npm start. It's a better server, and it's more flexible in the future.
Hi. I wanna host my nuxt app on EC2. Can you provide some links of articles or video tutorials for reference?
Sorry Erik but just there is one paramenter you forgot to mention. in nuxt.config.js the mode:"universal" or mode:"spa"
I´m not an expert but i think i can do npm run build either with mode "spa" or "universal"
Can you clarify on this?
Thank you
It defaults to universal. You can change it to spa if you don't want to use it as a universal app...
how to deploy on apache2 server?
This did not work for me
Why?
Thank u
Thanks for this nice work Eric
Hey Erik, Amazing video. I was looking forward for this kind of video from long time. I have setup server as you explained but was not really sure about correct way. After watching you video I'm very much confident. Thank you very for this video!
I'm have an issue with Nuxt while deployment and want to discuss it with you.
I'm working bit large application which takes 4-5 mins to get build on AWS lightsail so the issue happens when I visit my website while deployment is on and file building is almost 90% done then website start throwing 404 errors of many JS files like app.js, vendor.js and broke my website for 1-2 mins which is not good. Can you share your thoughts on it and whats the best way to fix that?
Surinder Singh thanks, are you waiting until it’s done building before you visit?
yah we did not realise that earlier but now few days ago we make site live and customer support comes few issues that users complaining about broken site. So we debug that get to that its broken when we deploying something on production server.
prnt.sc/koef1o
nice work!
Hi Erik. May I know what theme you're using for your VSCode?
Winter is coming! For my light theme.
Thanks, Erik!
Thanks!
You are welcome!