Video19 min watch

FREE Bolt.new Open-Source Beats v0.dev + Cursor!?🤖 Self Hosted Browser Full Stack App AI Deployment

In this video

  1. 00:00Introduction to Bolt.new: Free Full-Stack App Deployment in Browser
  2. 00:35Overview: Full-Stack App Editing and Deployment in Bolt.new
  3. 00:46Discovering Bolt.new: A Tool by StackBlitz
  4. 01:10Viral Announcement on Twitter by Eric Simmons
  5. 01:42Building Production-Ready Apps with Bolt.new
  6. 02:22Integrated AI for Error Handling in Bolt.new
  7. 02:50Example: Building an Astro Blogger Website in Bolt.new
  8. 03:23Open-Sourcing Bolt.new Codebase for Developers
  9. 03:52Speculation: Will Bolt.new Implement Limits Like V0.dev?
  10. 04:51Interface Walkthrough: Creating Apps with Bolt.new
  11. 05:19Self-Hosting Bolt.new: How to Set It Up for Free
  12. 06:28Step-by-Step Guide: Installing Dependencies and Setting up Bolt.new
  13. 07:15Task Manager App Example: Bolt.new Self-Hosting Demo
  14. 08:02Encountering Issues in the Self-Hosted Version
  15. 09:05Debugging Next.js App Deployment in Bolt.new
  16. 10:16Prompting Bolt.new to Build a Task Manager Application
  17. 10:38Faster App Creation on the Hosted Version of Bolt.new
  18. 11:16Impressions: Task Manager App Interface in Bolt.new
  19. 11:54Exploring the Calendar Feature and Deployment in StackBlitz
  20. 12:29Full App Deployment in StackBlitz from Bolt.new
  21. 13:05Bolt.new vs Cursor and V0: Current Speed and Performance
  22. 13:40Final Thoughts: Bolt.new's Potential and Future Improvements
  23. 14:12Outro: Channel Updates and Community Links

Links from the video

Transcript

2,915 words

What's going on everybody Josh pook here what if you had a tool where you could easily build front-end components something like vzer mixed with curser where you could edit them efficiently and effectively and you can install packages and run backends to deploy them right inside your browser on netlify and use them in a beautiful clawed artifacts type interface with the latest programming languages like react nextjs remix spell kit vit all that good stuff for absolutely Z that's right for free I'm

Going to show you how you can do that and build full stack apps all in bolt. new let's dive right into [Music] it all right guys so I came across bolt. new yesterday when I was on Twitter here it's made by a company called stack Blitz this tool allows you to prompt run edit and deploy full stack web apps all within your browser all right it has a EZ like interface it has cursor like editing comp uh features and it has

A claw artifacts type interface we're going to dive into that and show you that exactly and yes that it's not too good to be true guys right now it is 100% free um and you can see their tweet here going over it showing off the features here I'll leave a link to their uh Twitter down below CEO is this gentleman Eric Simmons all right so it's been going a bit viral since their tweet on October 3rd here basically said say that

Bolt allows you to install packages run backends edit code promt edit run and deploy full stack apps with npm V nextjs with Frontier AI for free all right showing some different examples here you can create delightful designs with working with code often in one prompt a simple make a to-do list with app with react results a slick functional fully functional to-do app that you can run at and edit here right here it says what about something more real so buol can

Create beautiful production ready multi-page apps with backends and databases like superbase and deploy them in production in one click that's because every chat can run a prod build and deploy it to netlify and Cloud flare no login required so yeah it's pretty insane and then what happens if the code doesn't work so we've instrumented and integrated AI at every layer of web containers making bolt aware of errors and able to solve them for you in one click crazy useful when working

On tedious tooling like gnarly webpack configs sometimes it's faster to write and the bug code yourself that's the power and magic of bolt. new it's a full Dev sandbox code when you want and prompt when you don't this makes building apps fast and fun so renew that domain because you're building that side project all right so here it's showing some different examples building a blog or website with Astro this is pretty insane hey bu build me a v.d like app with

Nextjs and Shad Cen use web containers to power the sandbox anthropic for AI and boom you can see the example here pretty crazy stuff here's creating a tweet thread composer that can import an export pretty cool stuff and they even say here interested in building your own full stack AI agents on top of web containers you're doing a workshop with anthropic on November or October 9th and we've also open source the code base we use to build bolt. new so you

Can get a head start today and they actually link to the open-source uh codebase right here for bolt. new this is actually pretty insane I'll leave a link to this as well okay so it does look like right here if you need more AI tokens or you want private projects you can purchase a page subscription and bolt new settings in the lower hand left corner so I don't know if they're going to end up being kind of like how v0 was

So I was using v0 uh actually a lot before even got highly viral and popularized and before you could actually just I you really did not have to buy the subscription you could I was using it so much and I never even reached a limit once it started going viral they the the free tier limit just got very limited so then I had to upgrade so uh I'm curious the same thing will happen with bolt but as of now um I

Personally haven't reached a limit but I also haven't been using it too extensively but let's go ahead and check out the interface here as you can see it looks very very similar to something like v0 and uh it has a nice beautiful interface sort of shad cnes and you can either click a prompt down here such as start a Astro blog or use native script to build a mobile app or V press remotion uh draft a presentation with slide V uh

UI with shad CM or you can select a blank app such as nextjs typescript react remotion remix all the good ones down there and just so you know you can upload images as well right here okay so I'm going to show you how you can actually self-host bolt. new so you can actually run this for free without having to pay for the pro version if you do uh care about reaching the uh cap limit you get about 150k tokens per day

So then there's a $9 plan plan a $29 plan but you can actually like I said Host this for free um self-hosted you're just going to need to use your own anthropic API so first things first we're going to get cloned are you tired of pouring thousands of dollars into appointment Setters only to watch leads slip away imagine having a team of elite sales agents booking qualified appointments for you around the clock no more wasted time on training no more frustration

With performance and no more draining your budget on inconsistent and expensive call centers introducing stride agents AI powered appointment centers that work 24/7 never get tired and book appointments while you sleep trained on thousands of successful conversations our AI agents outperform human teams at just oneth of the cost join the ranks of businesses that doubled their appointments and booking rates in just a matter of weeks don't get left behind in the AI Revolution visit stride agents.com now and transform your entire

Sales process with Cutting Edge AI technology it's time to accelerate your stride with AI agents okay so get cloning and I'll leave the link to this contributing.md file as well so you can directly access it then we're going to npm install the dependencies all right so you're going to CD into bolt. new and then I'm going to pnpm install all right so now all the dependencies are installed I'm going to go ahead and just run code dot to open up the

Uh file in vs code all right so we're going to create a new file which is going to be a env. local and then we're going to paste in our anthropic API key here like so all right now that we have our anthropic API key I'm going to do pnpm run Dev all right and we can see started on Local Host 5173 I'm going to go ahead and open that all right and you can see here we have the local version

Of bolt. new hosted on our own computer right so here I say nextjs app task manager modern Shaden and it's a little bit different than the uh non- selfhosted version as you can see here all right and you can see here it's saying certainly I'll help you build a modern Task Manager application using nextjs Chad C nuui components and a Sleek foundational task management app with a clean interface so it's creating the package Json running the command of npm install uh

Shad CN latest. init or in it and then creating the app layout the page. TSX The Source component of um task manager. TSX now it's running the command npm runev and now it's saying I made the task manager app so we can actually see the files being created right here on the code side so you can see files it has sort of like a VSS code Type Builder right here it's taking a little bit slower on the self-hosted version all right

So I had a bit of trouble creating the files initially so I just let it know and now it's recreating the TS config.js the layout the page. txx and the global CSS all right so you can see here it got the Tailwind Tailwinds config the button. TSX from Shad CN input TSX checkbox. TSX all these different components uh lib util now it's running the command install Shaden latest and run Dev and it literally did all that we can see the terminal

Here we can see you can toggle this on or off and then you can see all the different files here which you can go ahead and you can edit all right and you can you know if you wanted to change stuff you could do it in the chat but we can also go here to preview now I'm getting no preview Let me refresh still no preview I'm going to let it know that I see no preview available okay the one thing

That I'm having issues on is it like it is kind of slow and it is even a bit slow on the non-self hosted version um and I was encountering some I currently am encountering some issues with the deploying of the app I don't know if you saw well I I'll leave it in here when it loaded it was like had no um had no styling and whatnot um basically it load I tried loading the next JS app and then um I

Said it had no preview available and it said it had to start an XJ or it said that uh it would start an Express server to host the nextjs application which it then started and then um yeah it had no styling and then I said do we really need the express server and uh yeah now it's kind of just I could probably troubleshooted but it's not really worth it I'm just going to show you in the posted version now I don't

Know if this is because I'm running in PMP runev I don't know if I have to deploy it or anything like that but yeah I'll be playing around with the selfhosted version a bit more and if you have any ideas to as well you can let me know in the comments down below all right so here's my prompt build a beautiful modern professional task manager and calendar application that is like click up.com with can band board and many other features it

Should be on nextjs and use Shad CN components with light mode and dark mode okay so I'm going to run that all right and you'll see here it's going to open up the side pane here the editor which is kind of like the VSS code editor where it's creating all the different files the UI components and yeah I just think you know as you'll see here it's just way faster on the hosted version um so that could maybe just be um

A variety of variables and it looks like it's actually installing as you can see here it's creating the app layout the theme provider the mode toggle toggle the header sidebar page. TSX all the different good stuff there and it's a lot quicker now it is still like as as you'll see once we start editing it it it's you know understandably not you know Lightning Fast um but I think you know they'll be improving upon it and whatnot let's go ahead to

The preview side I think it's still launching right now yeah it's doing mpm install wow I'm not going to lie this is pretty damn impressive this is one shot we got a it's actually really nice like I mean it's obviously a Shad Cen so it looks really cool wow okay this is really cool um we got a search bar up here it's called task flow we got our dashboard we got our tasks we got our calendar we got our settings like

I said if I click on the menu right here it's going to be a little bit slow to load additional pages okay there we go um now it is somewhat compact here in terms of responsiveness okay like if we had this on a full screen it would probably look a bit better but still this is something that obviously you could iterate on and tell it to make it more responsive let's go to calendar real quick okay we got the calendar component

And looks pretty good yeah I just got a notification this PL page is slowing down the browser so like I said still not the fastest um but you can go ahead open in stack Blitz right here or deploy so if I open in stack Blitz you can see here it opened all the different um you know folders here our project right inside stack Blitz you can install dep pendencies Run start command and you'll be able to see it get deployed right

Here as well so that's actually a really cool too if you click deploy here it's actually deploying the application all right so here we can see it inside stack Blitz we can turn dark mode on as well if you'll see when I loaded it the first time it kind of loaded without the HTML so maybe that's what happened in the self hoser version I think if you just play around with it you'll be able to get it working um as well

It's just for me it was a little bit slower all right and just cuz we did a fairly simple project we didn't get too many errors but you can see here in this video if you do get errors bolt automatically picks it up and you can just click on fix errors and it's going to fix them automatically so it's a really good pair programmer in that way within the browser now truthfully am I going to be using this to replace cursor

And vzer fully right now no I'm not I do think the technology and the concept of this is really really cool it's it's better than something that we saw like Devon this is like what Devon was supposed to be and it does have a really nice Dev experience the only thing for me is like kind of the speed it's a little bit slow still but this is such a new app there's been a lot of hype behind this tool so I'm

Excited to see how it grows I know they're going to make a lot of improvements and maybe within a month or so or even a couple weeks it's going to uh be even a lot better than it is right now but in the meantime having something in the browser I find is going to be a little bit obviously a little bit slower than something like an IDE like cursor and for me I personally just mainly use v0 for getting like Concepts

Or components or UI components and all that stuff and I don't need to fully deploy an app within the browser as of now now I could do that if it was very fast and a better experience which it could get to and it probably will soon but in the meantime I think this is a really good app let me know what your thoughts are in the comments down below about bolt. new have you tried it out yet are you going to

Try it out do you think it beats vzer do you think it's going to be cursor let me know in the comments Down Below guys other than that if you're new to the channel we upload videos every single day on AI business growth AI coding automation Marketing sales Etc so if you're new to the channel you got some value here make sure to drop like And subscribe to stay up to date with the daily uploads other than that guys thank you

So much for the recent 7,000 subscribers road to 10K on the way if you haven't already joined our free community stri community.com our free Facebook group and free Discord Channel link to that will be in the description down below also too guys if you're a business owner if you run a business and you have leads and you need to book them into your calendar and you want an AI appointment center check out stride agents.com link to that will be there as

Well other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course guys accelerate your stride take care

Latest from the blog

View all