- 141
- 338 614
Atharva Deosthale
India
Приєднався 25 чер 2020
If you're looking for web development tutorials, this channel is the best place for you to look at the existing tutorials, or request a tutorial where we go in-depth with all the deep concepts of the topic. Subscribe to the channel NOW if you don't want to miss out on dope web development tutorials.
Self-Host Next.js App on a VPS using Coolify! (or any containerized app)
Hello guys! In this video, we will look at how you can self-host a Next.js app (or basically any app) on your own VPS using Coolify. Coolify is an open source service that you can deploy on your VPS that makes self hosting easy. It gives you a panel where you can manage projects, start/stop projects, enter project container's terminal, see logs, etc. Coolify makes it even easier by auto generating SSL certificates for the domain you assign to your projects.
In this video, we will containerize a Next.js application using Docker and will deploy it on our VPS using Coolify, basically self hosting it.
If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝
Links
Hetzner Cloud - www.hetzner.com/cloud/
Coolify Documentation - coolify.io/docs/installation
Any suggestions? Leave in the comments below!
TIMESTAMPS
0:00 - Introduction
1:10 - Creating a VPS on Hetzner
6:56 - Installing Coolify on the VPS
9:42 - Deploying a Next.js app using Coolify
15:26 - Setting DNS records for custom domain
19:33 - Conclusion
My links
E-mail - hey@atharva.codes
Blog - blog.atharva.codes
Latest Links - links.atharva.codes
Twitter - athudeosthale
LinkedIn - linkedin.com/in/atharvadeosthale
#programming #programmer #javascript #nodejs #npm #reactjs #react #typescript #nextjs #next #cloudflare #coolify #hetzner #vps #app
In this video, we will containerize a Next.js application using Docker and will deploy it on our VPS using Coolify, basically self hosting it.
If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝
Links
Hetzner Cloud - www.hetzner.com/cloud/
Coolify Documentation - coolify.io/docs/installation
Any suggestions? Leave in the comments below!
TIMESTAMPS
0:00 - Introduction
1:10 - Creating a VPS on Hetzner
6:56 - Installing Coolify on the VPS
9:42 - Deploying a Next.js app using Coolify
15:26 - Setting DNS records for custom domain
19:33 - Conclusion
My links
E-mail - hey@atharva.codes
Blog - blog.atharva.codes
Latest Links - links.atharva.codes
Twitter - athudeosthale
LinkedIn - linkedin.com/in/atharvadeosthale
#programming #programmer #javascript #nodejs #npm #reactjs #react #typescript #nextjs #next #cloudflare #coolify #hetzner #vps #app
Переглядів: 769
Відео
Deploying Next.js Apps on Cloudflare! Cloudflare Workers Tutorial!
Переглядів 3 тис.Місяць тому
Hello guys! In this video, we will look at how you can host your Next.js apps on Cloudflare workers. Cloudflare recently announced that OpenNext (an initiative that wants Next.js to be deployable on all hosting platforms) now supports Node runtime support in Cloudflare workers. Previously, Next.js was supported but through Cloudflare Pages and using the Edge Runtime i.e. the Worker Runtime. Now...
Partial Pre-Rendering in Next.js! Learn how PPR Works & How to use it!
Переглядів 278Місяць тому
Hello guys! This video will look at partial pre-rendering (PPR) in Next.js. PPR is a way where you can render static parts of a dynamic route during build time and render the dynamic parts when the user requests them. This happens by the Next.js server serving a static shell rendered during build time and then rendering & streaming in the dynamic parts while the static parts are served. All tha...
Next.js Razorpay Payment Integration Made EASY
Переглядів 1,1 тис.Місяць тому
Hello guys! In this video, we will see how you can integrate Razorpay into your Next.js applications easily. Razorpay has no official SDKs for React so it's a little tricky to integrate Razorpay into Next.js but this video will look at how you can use it anyways using a tricky solution. As compared to something like Stripe, Razorpay falls way behind because of the massive gap of developer exper...
Using Chrome AI (Gemini Nano) Locally and Implement Using Vercel AI SDK
Переглядів 3232 місяці тому
Hello guys! In this video, we will explore the Gemini Nano model shipped inside Chrome dev versions. Gemini Nano is a mini model that runs locally, so it provides the advantages of performing smaller AI tasks on the end user's computer in turn saving cost and maintaining privacy. In this video, we will explore this model in Chrome Dev version and consume it using the Vercel AI SDK in React. If ...
Using Clerk Elements To Build Custom Auth Components
Переглядів 4763 місяці тому
Hello guys! In this video, we will explore Clerk elements. Clerk is an authentication provider that removes the hassle of implementing authentication in your application by providing everything auth-related in a very simple way. Traditionally, Clerk provides React components that help with authentication, but sometimes requirements are a bit more and you might need custom components with custom...
ANIMATED Form with STEPS using React and Framer Motion! Learn making Animated Forms!
Переглядів 5883 місяці тому
Hello guys! In this video, we will create a form container that is based on steps. If you want to create forms with steps or simply an onboarding flow with steps, this is a good tutorial to follow. In this video, we will NOT actually create a form but create the animations. You can plug your form into it and create your own customized workflow. Animation credits given below. If you liked the co...
Beautiful Landing Page Animated Components for React by MagicUI!
Переглядів 2,6 тис.4 місяці тому
Hello guys! In this video, we will look at MagicUI. It is a collection of animated React components specifically made for use in landing pages (but no one would complain if you use it elsewhere). If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝 Links Magic UI - magicui.design/ Any suggestions? ...
A rant about roadmaps...
Переглядів 1155 місяців тому
In this video, we will not cover anything deeply technical but will just discuss coding roadmaps found on various social media platforms. I have a slightly different take about roadmaps. As much as structured learning helps quick learning, I think it might not be the best way of learning in the long term. Watch the video to know why! If you liked the content and found it useful, make sure you s...
Beautiful & Unique React Components using Aceternity UI!
Переглядів 6 тис.6 місяців тому
Hello guys! In this video, we will look at Aceternity UI. It is a collection of UI components built for React that are very beautiful. The creator seems to have spent a lot of time perfecting it! These components will give your website a good touch when it comes to "coolness" of your UI. It's pretty similar to shadcn/ui, where you don't need to "install" the components, but copy paste them into...
Are you LEAKING sensitive information in Next.js Pages Router?! (Read w/ Atharva Ep4)
Переглядів 1617 місяців тому
Hello guys! In this video, we will look at an article by Rexford Essilfie titled "You Are Leaking Your Next.js Application Features." In this article, Rexford mentions that you can modify the props for a page even after it undergoes server-side rendering using getServerSideProps in the pages router. Rexford has shown how a feature flag can be enabled on the client side by manually changing prop...
Preloading routes in Next.js! Using the Next.js Router to prefetch pages.
Переглядів 1,7 тис.7 місяців тому
Preloading routes in Next.js! Using the Next.js Router to prefetch pages.
Will this AI software engineer take your jobs? Devin AI software engineer!
Переглядів 1,1 тис.8 місяців тому
Will this AI software engineer take your jobs? Devin AI software engineer!
Creating paywalls on static websites?! (Read w/ Atharva Ep3)
Переглядів 2608 місяців тому
Creating paywalls on static websites?! (Read w/ Atharva Ep3)
BREAKING: PlanetScale SHUTS DOWN its FREE TIER!
Переглядів 7958 місяців тому
BREAKING: PlanetScale SHUTS DOWN its FREE TIER!
Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!
Переглядів 4,5 тис.8 місяців тому
Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!
Finally better hydration errors are coming in Next.js!
Переглядів 7458 місяців тому
Finally better hydration errors are coming in Next.js!
Bun Tutorial - a new JavaScript runtime!
Переглядів 2448 місяців тому
Bun Tutorial - a new JavaScript runtime!
BIG changes coming to React - Compiled React! (Read w/ Atharva ep2)
Переглядів 648 місяців тому
BIG changes coming to React - Compiled React! (Read w/ Atharva ep2)
Selling NFTs WITHOUT wallets using Cards! Crossmint Tutorial
Переглядів 5238 місяців тому
Selling NFTs WITHOUT wallets using Cards! Crossmint Tutorial
React Email 2.0 Tutorial - Create Beautiful Emails Using REACT!
Переглядів 1,8 тис.8 місяців тому
React Email 2.0 Tutorial - Create Beautiful Emails Using REACT!
Correct ways to create forms in React (Read w/ Atharva Ep1)
Переглядів 1248 місяців тому
Correct ways to create forms in React (Read w/ Atharva Ep1)
Easy form handling in React using Formik!
Переглядів 2759 місяців тому
Easy form handling in React using Formik!
TanStack Router is my favourite React Router -- TanStack Router Tutorial
Переглядів 7 тис.9 місяців тому
TanStack Router is my favourite React Router TanStack Router Tutorial
Next.js 14 App Router CRASH COURSE - Learn about Server Components and Next.js App Router
Переглядів 5219 місяців тому
Next.js 14 App Router CRASH COURSE - Learn about Server Components and Next.js App Router
Accepting Payments using LemonSqueezy - Integrating LemonSqueezy into Next.js Tutorial
Переглядів 8 тис.9 місяців тому
Accepting Payments using LemonSqueezy - Integrating LemonSqueezy into Next.js Tutorial
Using Sentry with Next.js for automatic bug tracking
Переглядів 3,6 тис.9 місяців тому
Using Sentry with Next.js for automatic bug tracking
Drizzle ORM is my new favorite ORM...
Переглядів 1,6 тис.9 місяців тому
Drizzle ORM is my new favorite ORM...
Turborepo Tutorial - a monorepo by Vercel
Переглядів 4,4 тис.9 місяців тому
Turborepo Tutorial - a monorepo by Vercel
Does cloudflare supports all NextJs features such as SSR
What about the performance?
all the nextjs feature works on this OpenNext and cloudflareworkers ?
Title is for react why are you doing it for next then
Keep up the good work!
great video, any idea on how to use github here for deployment, the docs are too hard to go through? or maintain multiple environment through wrangler?
Thank you, buddy, for this amazing video. You saved my lots of time. Your explanation is very simple and straightforward to understand.
video on AI things using Nextjs , openAI, AI sdk
Thank you for the video. I'm worried when we put these videos online and not talk about what could be missing. Open next does not support middleware yet so authentication won't work. Some individuals will watch this and run with it
Bro in my case, the voices are keep changing female to male and male to female while I'm clicking on The button, How can I Fix it?? I tried lot things but it's not working??
For consumers, it's Razorpay, but for beginner developers, it's Lavdapay
bhai koi aur better options hai kya
Hi @atharva , I like your explanation so much can you please make a detailed video on bootstrapping monorepo aplication using next js and prisma as Orm , and shared db among all the apps
lol bhai github fod doge tumlog hahahaha, India is different. British ruled over us, what we do, spam Github
why there is no option for upi payment ?
I got my first freelance project so I was searching for pg integration and here u go thanks I have a doubt u used razorpayx and I wanna use the normal razorpay by giving the business credentials is the process same or diffrent , btw thanks 🙏
Does using this UI library makes code heavier ??
is Astro Server Islands the same as Next.js Partial Prerendering (PPR)? If not, can I achieve anything similar (PPR) with Astro?
Thank you for a such nice video.😀
Thank you very much for keeping it simple and to the point. Very helpful .
Bro how did you got this many metrics in your account
What do you mean by it's not free because cloudflare workers only supports workers that are only 1MB? I assume a worker handles each route. So at least one of your routes is larger than 1MB essentially? It sounded like you were saying all routes are handled by 1 worker or smth
Will server actions work?
in the handler function , i am getting only the paymentId in the response object. What could be the issue?
Thanks for explaing it in a easy way. but my project why it asks for mobile no first ?
thanks
As this server is being hosted in Helsinki, would there be some more latency for a user in India?
Can you create a video wherein you develop a project that uses drizzle + all the components of the cloudflare stack?
Amazing!
Amazing,thanks
nice 🔥
Yes, you really provided the values. thank you so much. Please help to show about the webhook so that it can automatically deploy after pushing to github.
I’m trying to use Nixpacks, but I’m getting a “Bad Gateway, Error Code 502.” It runs fine on Coolify with SSL. I’m using a VPS on Hetzner with Cloudflare (Full SSL).
Great but facing issue on components that it not showing optimization can you upload for windows
bro x razor also wanted gst no what should i doo
Lets go 🔥🔥🔥
Let's go 🔥🔥🔥
Interesting, thanks! I made a video on dockerizing a next js app and I generally appreciate the fact that NextJS allows this to be done
Yeah, usually self hosting using Docker we run Next.js in a Node runtime instead of an Edge runtime. So self hosting doesn't give any problems
@@AtharvaDeosthale im also looking for deploying nextjs application and i thought of self hosting but dont we loose on caching and other optimization which vercel do?
Thanks for the video and explanation. i was really confused why nextjs couldnt be hosted on other hosting sites and this video cleared most of my doubts
😮 this ll open crazy possibilities
😮
Is this a one time contract means it will work only for the one crowdfunding project? what if we have multiple crowdfunding for different projects?
wtf, my vs code got corrupted. 😐
I don't know how people found it easy its really complicated how will a person will do who don't know how to do coding i want to sell digital product but i am not getting how can i sell
Unfortunately, these videos are focused on developers who have at least intermediate level knowledge about code. If you don't know how to code, you might wanna explore no-code options.
I didn't try it out yet, thanks for the video!
🔥
razorpayx is for just registere businesses, what about us individual indie hackers :)
🔥
with stripe & lemon squeezy stopping their service I was looking for razorpay integration and here you are with the video 🎉
how can i use in react app/ u used in nextjs
Lemon squeezy has stopped operations in India , can u make a alternative video on razorpay or Paddle pleaseee.
Razorpay video coming very soon, stay tuned! (and maybe Paddle too later)