In this first tutorial, we will be covering exactly how you set up your development machine so that we can start working on our HackerNews clone.

We’ll get a basic VueJS application up and running and we’ll also cover how you can build this simple project so that you end up with files that are deployable to the likes of and S3 bucket, or a server that can serve your files.

Video Tutorial

Installing the Vue CLI

We’ll be using version 2.9.3 of the vue-cli in order to create our initial project. You can install this by typing the following:

$ yarn global add vue-cli
# or
$ npm install -g vue-cli

Note: At the time of writing this vue-cli 3.0.0 is currently in beta, I will update this when it goes to production!

Once you have done this, verify you have a working vue-cli by typing:

$ vue -V
2.9.3

Creating our Project

Once we have successfully installed version 2.9.3 or above of the vue-cli, we can then go about creating our project by typing the following:

$ mkdir hackernews-clone
$ cd hackernews-clone
$ vue init webpack

This will ask you a series of questions regarding how you project should be set up.

  1. Choose Y to generate project in the current directory
  2. Leave the Project name as is.
  3. Leave the project description as is.
  4. Enter your name in the Author field.
  5. Choose Runtime + Compiler.
  6. Install vue-router = Y
  7. Use ESLint to lint your code = Y with the Standard lint settings.
  8. Set up unit test = n for now, we can add them later
  9. Choose no for e2e tests with Nightwatch
  10. Then select the package manager of your choice, I’ll be using Yarn

Once we’ve done this we can run it locally by calling:

$ yarn run dev

When you navigate to http://localhost:8080 within your browser, you should see your newly created VueJS application running:

VueJS up and running!

Building Your Project

Once you are happy with your project, you will need to build it using the yarn run build command. This will generate a dist/ directory which will contain all of the necessary files needed in order for your application to run. If you are planning on deploying this application to a server or an AWS S3 bucket then you can certainly do so by simply pushing these files.

Once you have run yarn run build you should see your dist/ directory look something like this:

dist/
- index.html
- static/
- - css/
- - js/
- - style.css 

Within the dist/static/js/ directory you should see all of the minified, transpiled javascript files that your index.html file needs in order to run as a Vue.js application. You will be able to push this up to

Next Tutorial

Excellent, we now have everything we need set up on our machine in order to build our HackerNews clone! In the next tutorial, we are going to start building up our VueJS project and create our first single-page component with its’ own styling. You can find that tutorial here: Part 2 Creating a Few Components


Tutorials


Part 1 - Setting Up Our VueJS Project Logo
Part 1 - Setting Up Our VueJS Project
3 Minutes

In this tutorial, we are going to be setting up our basic project that will form the base of our HackerNews clone

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Part 2 - Creating a Few Components
5 Minutes

In this tutorial, we are going to be creating a few components to our HackerNews clone and fleshing out our project.

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Part 3 - Adding a Few Routes To Our App
4 Minutes

In this tutorial, we are going to setting up our application to use the vue router and add a few simple routes to our application.

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Part 4 - Hitting The HackerNews API
5 Minutes

In this tutorial, we are going to start hitting some APIs and showing some of the top stories on our HackerNews clone.

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Part 5 - Viewing Individual News Articles
6 Minutes

In this tutorial, we are going to add some more routes and components to our application to view individual news items and the comments

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Part 6 - Advanced Components
5 Minutes

In this tutorial, we are going to split out our application into more components and use some of the more advanced features such as props and transitions.

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Part 7 - Managing State with Vuex in your VueJS Applications
6 Minutes

In this tutorial, we are going to look at how you can manage state within your VueJS applications using vuex

Published: Monday, Mar 19, 2018
Part 1 - Setting Up Our VueJS Project Logo
Building a HackerNews Clone in VueJS
2 Minutes

In this series we look at how you can build your own HackerNews clone using Vue.JS

Published: Monday, Mar 19, 2018