‫So let's start with a very easy way
‫of deploying our application
‫by simply uploading it to a free service called Netlify.
‫But first of all,
‫we actually need to first go back to our login form,
‫so right here in the authentication folder,
‫because here we actually left our credentials
‫in the default state.
‫So let's of course clean this.
‫Otherwise everyone could just log into our application.
‫So very important step here first,
‫but now with that step done
‫it is time to build our actual application bundle.
‫So remember how we learned earlier
‫that our development tool, so in this case,
‫that Vite will take all the files that we have created here
‫during development and will all bundle them
‫into one single file.
‫And so that file is what we then deploy to production.
‫So not just that file
‫but really the output that we will get here.
‫So with Vite, that command, and instead of just telling you
‫we can actually read that here.
‫And so we have it right here.
‫So in our terminal, let's run NPM run build.
‫And we actually already did this earlier
‫with the World Wise application, right?
‫And now here we have a few issues.
‫So like all of these ES lint warnings.
‫So maybe let's go check this out.
‫So in the cabin row we have something,
‫so apparently we have this variable that we're not using
‫so maybe we should.
‫So let's see where we use this function actually.
‫And so down here there's probably some button,
‫yeah, this one right here.
‫So since we are already here
‫let's just simply disable it whenever we are creating.
‫All right, so we fixed that
‫and there is something in our sales chart
‫so we can actually click there with command or control.
‫And so let's see.
‫So here we are importing this function we don't need.
‫So let's clear that and we can also actually
‫remove this fake data that we no longer need.
‫Then let's see if we have something else and apparently not.
‫So let's clear this and let's run NPM build again.
‫And there we go.
‫Now, okay, so we have this one bundle here
‫which is indeed pretty huge,
‫as we can see in this warning here from Vite.
‫Now, in an earlier project, and I think it was
‫in the World Wise Project, we actually did code splitting
‫in order to avoid this problem.
‫However, this application will be fully hidden
‫behind a login,
‫and also only a few users will ever use this application
‫which remember is also the reason why we're not
‫doing server side rendering as well.
‫And so in this situation, this is actually perfectly fine.
‫And also we already learned how to do this.
‫So let's close all of this
‫and let's see what we actually got.
‫So the folder that was created is this dist
‫folder right here.
‫So here we have the assets
‫which is that huge JavaScript bundle.
‫So that one or almost one megabyte of JavaScript.
‫And then we have the HTML
‫and all the images that are necessary.
‫All right, and so now we are ready to take this folder
‫and deploy it to that service
‫that I mentioned earlier called Netlify.
‫So let's go to netlify.com, which is one
‫of the many hosting providers where you can very
‫easily host React projects no matter how large they are.
‫Now, this website here changes all the time
‫but what you need to do is just to sign up
‫for your own account.
‫So here you can sign up with any of these services.
‫And then once you're done doing that, I meet you back here.
‫So as soon as you're logged into Netlify
‫your dashboard should look something like this.
‫Or maybe in the future they will have changed it again.
‫But basically all we need to do is to come here
‫or also we can select this site options here,
‫and then we can create a new site simply with this option
‫of deploying manually.
‫And as you can see, I actually host all of my like
‫demo projects here and even my personal website.
‫So I really like the service and use it myself
‫and they're not paying me to tell you about this.
‫So let's click there.
‫And now all we have to do is really drag
‫and drop that folder that Vite built for us earlier.
‫So that's this dist folder right here.
‫But actually there is something that we still need to do.
‫So I was thinking about doing that later, but let's actually
‫do it immediately because otherwise, our single page
‫application is not going to work on Netlify.
‫So let's first come back to VS code, and then
‫in the dist folder I need you to create a new file
‫called Netlify.toml, which is like some special data format.
‫And then here you need square brackets two times,
‫then redirects,
‫and then from
‫dist URL to index.html.
‫And then with the status code of 200.
‫And let's actually also copy this file here
‫into our main folder so that we don't lose it
‫in case we need to build our application again.
‫So then this folder would be recreated
‫and that file would be lost.
‫And it would actually be even better
‫if you pasted this file into the public folder.
‫Because then it will automatically be copied
‫into the dist folder each time that you create a new build.
‫Okay, so now here we have that important file.
‫And so now we can indeed grab the entire folder
‫and just drop it here.
‫So that's gonna take some time uploading everything
‫and once they're done, and so that was pretty fast,
‫then we can click here, so open our production deploy.
‫And then here is our application live on a web server.
‫So let's see if we can still log in.
‫So let's do test@test.com,
‫and you of course need to use your own credentials.
‫And beautiful.
‫So here is our application ready to be shared
‫with the entire world.
‫And again, by default, we got our dark mode.
‫At least I got because that's the default
‫on my operating system.
‫And here, let's just see.
‫And indeed everything works just exactly
‫in the same way as before.
‫So that's so great.
‫Now you can send this URL here to anyone,
‫and then anyone can see the nice application
‫that you have built,
‫at least if you also give them your credentials.
‫But anyway, this URL here is not really that
‫nice to be shared, right?
‫And so we can actually change this.
‫So let's come here to the site's overview now.
‫And so then here is that URL.
‫And here in the site settings
‫we can then change the site name.
‫And so I will now change it to the Wild Oasis
‫which will then give me the Wild Oasis
‫on this .Netlify.app subdomain.
‫So let's see if this is still available.
‫And it is.
‫So for you, it will now no longer be available
‫but then you can just use your own name
‫or something like that.
‫And so now we have this really nice looking URL right here.
‫And if you wanted, you could of course then
‫buy your own domain name and then also add that there.
‫And here it is.
‫So again, here you can set your own domain if you want
‫and if you wanted to now change something,
‫so if you want to update something in your application
‫you would just change the code here,
‫then run the build command again manually
‫exactly like we did here earlier.
‫And then don't forget to add back this Netlify file.
‫And then finally, once you're done, you can,
‫oh let's see where that is.
‫Yeah, so right here in deploys
‫you can then just drag and drop that folder here again.
‫And so then that will redeploy your application.
‫And that's actually it.
‫So this is the very easy way
‫of very quickly getting your site up and running
‫on a real domain ready to be shared with the world.
‫Now, if you want more of a real world approach
‫then you would use something called continuous integration.
‫And for that, you will have to upload your code
‫into a GitHub repository and then connect
‫that repository with your deploy right here.
‫So here in Netlify or also
‫in some other service like Vercel.
‫And so in order to show you how to do that
‫in the next lecture, we will set up
‫a Git repository and upload your code to GitHub.