FREE Hosting for your Vue.js App! (Deploy to Netlify)

in this video i'm going to show you how to host your vue.js app for free in just a few minutes by deploying it to netlify if you're new here my name's danny i'm an indie app developer and creator of fudgit if you want to learn about vue.js web development app development and all that good stuff click subscribe and click the bell so you don't miss anything every subscription helps me to create more content for this channel so i'm going to be deploying this simple to do app that i created using beautify where we can just add tasks mark tasks as done and delete tasks and reorder tasks and filter tasks and stuff like that and if you want to learn how to create a simple version of this app in 30 minutes then i'll post the video link at the end of this video but this deployment will work with any vue.js 2 of ugs 3 app created using the vue cli so basically any vue.js app created using the view create command so what we're going to do is build the app for production add it to a local git repository push the local repository to a remote gate repository on github and then use netlify to deploy our app using our remote repository and by default the latest version of the vue cli actually creates a git repository in your project so if you see this dot get folder and you might need to show your hidden files to see this then as long as you've not been actively using this git repository let's just delete that so that we're all starting from scratch and we don't have any issues [Music] let's deploy our finished app to netlify and before we do that we need to set up a git repository for the project and before we do that let's build the app for production because for our netlify deployment we're going to need to know two things we're going to need to know what the build command is and which folder from our project should actually be deployed and if we go to package.json we can see our build script here so we just need to run npm run build and it also tells us this in the readme as well so let's run this command i'll just kill the dev process and run npm run build okay it's finished building our app and we can see it's created this dist folder and inside there we can see our minified and production ready files so if we take a look at some of the files we can see everything is minified and so we could just take these files and upload them to a server using ftp or something like that and the app would work in the browser but we're going to be deploying this to netlify and what netlify is going to do once it has all of our files from our git repository that we're going to set up is run the build command that we just run and then deploy the files that are in this folder so when we set up network file we're going to need our build command npm run build and we're going to need the name of this folder dist but before we can deploy to netlify we need to set up a git repository [Music] let's set up a local git repository for our project so what is a git repository well it basically allows us to keep track of all the changes to our files as well as being able to jump back to previous versions of files it allows us to have different branches for our project such as a dev branch for development and another branch for production it allows us to share our code and collaborate on our code with other developers and i don't want to get too deep into git well there are tons of free videos on youtube that you can watch to learn more about git and if you don't have git installed and you can check that by just running git in your terminal and if you don't see all of this stuff then you need to install it and you just need to go to git dash scm.com slash download and you just want to download and install git for your platform and once that's installed we can now use it in our terminal and so to initialize a local git repository for our project we need to make sure we're in the root folder of our project and we just run git init and we can see it says initialize empty git repository and if we look at our files now actually we won't see it here but if we open up the folder we can see it's created this git folder and now we need to add all of the files of our project to staging and staging is just somewhere to put all of our files or our file changes temporarily before we actually commit them to the local repository itself and so to add all of our files to staging we can just run git add and then a dot and we can now run git status to see all of the files that have been added to staging and we can see all of the files of our project have been added to staging and we now need to commit these files or these changes to the local repository and to do that we just run git commit dash m and then we just enter a message in quotes so i'm just going to put initial commit and run that so now all of the files of our project have been added to the local git repository and we now need to push our local repository to a remote git repository [Music] before we can deploy our project to netlify we need to set up a remote git repository basically a git repository that's on the internet and for this we can use github bitbucket or gitlab but i'm going to be using github here so you just want to go to github.com and if you don't have an account just create one it's free and it's really quick and once you've signed up and you're signed in you can just click on this new button here to create a new repository and we need to give this a name so i'm just going to call it beautify to do and you can enter a description if you like but i'm just going to leave that blank and then i'm just going to click on create repository and it's now created the repository and it's taken us to the github page for this repository um there's nothing in it right now but we're going to push our local git repository to this remote git repository and if we scroll down it tells us how to push an existing repository from the command line so we need to run each of these commands so i'll just run these one at a time so we'll run this first command and this line is basically going to tell our local repository where its corresponding remote repository is so we'll run this and we'll run the second command um this is basically just going to create a branch for our repository called main so we'll run that and this final line is just going to push our local main branch to the remote main branch so let's run that and that's now finished so if we refresh this github page we can now see all of our project files here and our readme will appear here as well and by the way when you fire these git commands it might ask you for your credentials but now that we have all of our project code in a remote repository we can now use this remote repository to deploy our app to netlify if you found this video useful so far smash the like button and leave some love down in the comments [Music] let's deploy our app to netlify so you want to go to netlify.com and if you're not already signed up just click on sign up um personally i always prefer to sign up with an email and password rather than using an associated account just in case anything ever happens to that associated account which might then lock me out of other accounts but feel free to sign up with github if you prefer but i'm just going to log in and then we just want to click on new site from git we want to choose github and we get this github popup and we need to install netlify so that netlify can use our github account and if you like you can allow netfly to use all repositories on your github account but i'm just going to choose only select repositories and i'm going to select my beautify to do repository scroll down and click on install and it looks like something's gone wrong here so i'll just try this process again i'll click on new site from gate click on github and i can now see beautify to do listed here so i'm going to click on that we're always going to deploy the main branch and here's where we need to enter the build command and the publish directory so remember our build command is npm run build so we just put that in here npm run build and the publish directory is this dist folder that it's created so we can just put dist in here and now we can just click on deploy site and it says it's deploying our site and if we click on deploying your site we can see a log here and we can see it's run our npm run build command and it's now building for production and this might take a little while and it now says net the five build complete and site is live so if we click on preview we can now see our app running in the browser on the internet um this sub domain that it's used this randomly generated subdomain isn't really much fun so let's see if we can change that so i'm going to click on deploy settings uh maybe it's in domain management i'll click on options here edit site name so let's change this to beautify to do i'll click on save and now if we click on this link here our site is now at beautify2do.netlife.app [Music] and now if we want to make changes to our app all we need to do is commit those changes to our local repository and push the changes to our remote repository on github and netlify will automatically detect that the repository has changed and it will rerun the build command and redeploy the dist folder so i'll just demonstrate that now let's say we want to change the name of our app i'll just jump to our dot n file and i'll change the app title to penguin balls and save that then we just need to add our changes to staging with git add dot and then we need to commit the changes to the local repository with git commit dash m and then a message say updated title and then we just need to push the changes to the remote repository with git push dash u origin then the name of our branch main and that's now done and netlify should detect this and rerun the build command and redeploy so all we need to do is wait for a couple of minutes and i just had to wait a minute or two there and we can now see our app name has updated i'm just going to change the app title to what it was before so beautify to do save that run git add dot then git commit dash m reset the title and then get push dash u origin main and after waiting a couple of minutes my app title is back to what it was again if you want to learn how to create a basic version of this beautified to-do app then check out this video above or check out this other video please hover my face over there and click subscribe every subscription helps me to create more content for this channel thanks for watching and i'll see you in the next one [Music]

Channel: Make Apps with Danny

Views: 7,133

Keywords: vue.js, deploy website, deploying, free hosting website, free web hosting, git, github, how to host your website for free, javascript, learn netlify, netlify, netlify 2021 deployment, netlify 2021 tutorial, netlify build, netlify ci/cd tutorial, netlify deployment tutorial, netlify hosting free, netlify hosting tutorial, netlify tutorial, netlify vue, upload website to netlify, vue.js deployment, web development, web hosting, website deployment, website hosting

Id: W2lGxvNs2KM

Length: 12min 32sec (752 seconds)

Published: Wed Feb 24 2021