Building an Online Store with Vue CLI — Part 8

Hosting your prototype with Github and Netlify

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7 | Part 8:

So far we’ve done a lot of awesome work to create a prototype for an online store. But wouldn’t it be nice to have the project live somewhere on the web so that we can show it off? In this tutorial we’ll get our project hosted with a combination of Github and Netlify. We still won’t have a dynamic backend, but at least other people will be able to see our work!

Step 1: Github setup

If you don’t have one already, create a Github account and click the “Start a project” button on the dashboard once you’re logged in.

Enter a name for your project and click “Create repository”. All other settings can be left alone.

Since we have an existing project that we want to “push” to this repository, we need to head over to the project directory in our terminal and initialize it as a git repo.

cd to your project directory and run the following commands:

cd online-store // Or whatever the name of your project root dir is
git init
git commit -m "first commit"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
git push -u origin master

When you return to your repository on Github and refresh the page, it should have all of your project files in it and look something like this now:

Step 2: Build the project

In the future, whenever you want to deploy an updated version of the project you’ll have to run a build command that gets everything ready. Let’s practice that now. Assuming you’re already inside the project root directory in your terminal, run:

npm run build

After a successful build, you should get:

Build complete. The dist directory is ready to be deployed.
INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Now let’s update our repository so it has the necessary files to appear on Netlify (this won’t be a regular part of the update process in the future). In the project root directory in your terminal, run:

git add .
git commit -m "Add build files"
git push

The push was successful if you receive the following output at the end:

To https://github.com/magyarn/online-store.git
    ecbf5e4..5e83bcd  master -> master

Now let’s get it hosted.

Step 3: Set up Netlify

Create a Netlify account if you don’t already have one. Set it up using the same Github account you just created/used above.

Authorize Netlify to log in using Github.

After that, you’ll be taken to your deployment dashboard. Click the “New site from Git” button.

Select “Github” as the Git provider:

Complete the authorization process:

Install Netlify on your Github account. You can give it specific permission to access only certain repositories, or everything. It’s up to you. Click “install”.

You’ll then be returned to Netlify, where you can click the name of the repo you want to host:

Finally, on the next page, in the “build command” field enter npm run build . This allows us to automatically update the live site from our terminal whenever we run this command in the future.

In the “publish directory” field enter dist. This selects the specific folder Netlify should look at when rendering our site. The npm run build command populates/updates the dist folder for us.

Click “Deploy site” and that’s it!

Step 4: Refine the domain name (optional)

Once deployment is complete, Netlify gives you less attractive domain names by default. To simplify it to something prettier, go to the Settings tab for the project and click “Domain Management.” From there you can “Edit” the domain name to something else, as long as the name you want is available.

Tada! 👋