3 - Vue CLI + Netlify = ❤️

Prologue

So as most slavic bois, I am really into CSGO. Ironically, I got into CSGO more seriously because my english buddy Andy got me into it.

Lately I’ve joined forces with some of my Bulgarian homies and we’ve been playing a lot of CSGO. We have a group chat, where we talk about CSGO and other random shit all day, and obviously we make fun of eachother’s in game stats.

We use a third party service called FaceIt to play CSGO, because it has better servers, better anti-cheat and a better community than the official in game competitive servers do, and FaceIt also provides stats for your in game performance, such as how many wins do you have, what’s your biggest win streak, your head shot percentage, etc.

In order to make fun of someone’s stats or boast about your own, you’d have to go to the FaceIt website, click on your profile, then click on your stats, then take a screenshot, then upload it to the group chat, and I thought that I can simplify this process by pulling all of our stats in one place, where you can go and see how shit everyone is.

I needed to get out a simple web app, with a simple deployment pipeline and only worry about the code. I needed it to be fast and fun do work on and deploy. Also I challenged myself to have the entire thing ready in under 2hrs of total development time, so this is why I decided that I’ll use vue-cli to bootstrap the app quickly, and since I am alread blown away by how easy and straightforward deploying with Netlify is (this very blog is deployed on Netlify), I decided that this duo will be unstoppable.

So let’s dive straight into it! Let’s learn how to quickly bootstrap, code and deploy a Vue.js app on Netlify!

The Vue part

Firs off, we’ll start off by making an empty repo on GitHub and cloning it locally.

Now we need to install vue-cli locally. That’s pretty easy.

Upgrade your npm to the latest version by running

npm install -g npm@latest

Install vue-cli by running

npm install -g @vue/cli

Done. We now have Vue running locally. cd into your empty repo and run vue create followed by your desired app name. I called mine shame-book

vue create shame-book

When you run vue create, you’ll get prompted to select a preset for your app. By navigating with the arrows, you can choose a default one, or you can select Manually select features and tweak your app to your likings. I’ll leave that choice to you, but I went with the manual approach, so I could pick my linting style and configs.

Sweet! You’ll see that vue created an entire folder for you. In the root directory we have our standard config files, our package.json where all of the dependencies live, and we also have a couple of other folders - src and public. src is where we’ll be doing our coding.

Let’s see the app in action by running npm run serve and going to localhost:8080. And lo and behold, we see our app running with a basic Vue Hello World component.

I won’t go into details about how I’ve implemented my application, because having CSGO in game stats competition with your friends is not your standard use case for an application, but I’ll walk you through some of the things I did on a high level.

First, I got rid of the component that came with vue-cli and made a couple of components that I needed for my application. Then I created a services folder in my src directory, where I wrote my services that I use to hit the FaceIt API and collect statistics for the players I need to render on the homepage of the app. I imported the components and the services in my App.vue file - this is the main application file, and I used one of vue’s lifecycle hooks called beforeCreate to populate my application’s data with the FaceIT stats.

I like using SCSS for a css preprocessor, so let’s learn how to use that real quick.

I made a folder called styles in my src directory and made a _main.scss file. This file will import all other files in the same directory. I have them like so:

_variables.scss - All of the variables I need for the app - think colours, sizes, font families, etc.

_layout.scss - All of my layout styles

Since it’s a small app, I don’t need more, but you can include (and should!) as many specific files as you need.

My _main.scss file looks like this:

@import "_variables";
@import "_layout";

Easy money. Now let’s tell Vue that we want it to use those files.

First, let’s go to our base directory and add a couple of dependencies in the package.json file.

"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"axios": "^0.21.0"

I’ve also added axios, because I am using it to send requests to FaceIt.

Now, in the same directory, let’s add a vue.config.js file.

Edit that file and add

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          additionalData: `@import "@/styles/_main.scss";`
        }
      }
    }
  };

Now every time we need to use any of our SCSS variables and any SCSS in general in our components, all we need to do is

<style lang="scss>
  h1 {
    color: $my-awesome-color;
    @include my-sick-mixin(#B4D455);
  }
</style>

Sweet! We have our components, our services, our styles, and now we’re ready to deploy.

Simply run npm run build and Vue will package up your application for production. Push all of our work to our GitHub repo and it’s deployment time!

The deployment part

Ok, so this is literally going to be the shortest part of the blog, just because Netlify has made it so damn easy to deploy!

Go to Netlify, log in with your GitHub account and then select New site from Git

new-site

This will take you to your repositories, where we’ll pick our vue app.

pick-repo

Choose your vue repository and then you’ll see your basic build settings.

settings

In our build command we’ll put npm run build and in the publish directory we add dist. Hit the deploy button and watch it go! The deployment should be done pretty quickly and after it’s done, Netlify gives you an address for your app.

Here’s mine!

https://musing-pasteur-c834f6.netlify.app/

Netlify is set to track your master branch for pushes, and every time you push to mater, you’ll trigger a deploy and your app will be updated to the latest version. How amazing is that!

If you own a domain, it is super easy to point your domain to your Netlify app, but I didnt really feel like commiting to purchasing a domain for the CSGO stats of like 8 people, so I am happy to stick with the one I got.

And this is it! It is really that easy to get a front end app from 0 to production in just under 2 hours with vue-cli and Netlify. I hope you learned something and maybe got inspired to build and deploy something too!

Until next time.


Written by Emil Mladenov - a slavic software developer who decided to use a blog as a digital rubber duck

I also have a podcast