Book Image

Full-Stack Web Development with Vue.js and Node

By : Aneeta Sharma
Book Image

Full-Stack Web Development with Vue.js and Node

By: Aneeta Sharma

Overview of this book

Isomorphic JavaScript was the buzzword of the year 2017, allowing developers to utilize a single language throughout their web development stack and build cost-effective and scalable applications. MEVN is a one such modern web development stack consisting of web applications such as MongoDB, Express.js, Vue.js, and Node.js. Hands-On Full-Stack Web Development with Vue.js 2 and Node.js leverages the harmony of these technologies to help you create full-stack web applications. Starting with the core frameworks, this example-based guide explains all the key concepts of frameworks, how to set them up properly, and how to use popular modules to connect them together and make them work cohesively. You will learn all this with the help of real-world examples. In addition to this, you will be able to scaffold web application architecture, add an authentication layer, and develop the MVC structure to support the development of your application. You'll explore how to create data models for your applications and then write REST APIs by exposing your data model to your application. Solely orientated towards building a full, end-to-end application using the MEVN stack, this book will help you understand how your application development grows.
Table of Contents (12 chapters)

Introducing GitHub

GitHub is a version control service. It is a source code management tool specifically designed to track changes to our code. GitHub also provides features of social networking, such as adding comments, and displaying feeds, which makes it even more powerful because multiple developers can collaborate at the same time in a single application.

Why GitHub?

GitHub is a savior for software engineers. There are several advantages that GitHub provides that make it worthwhile to use. A few benefits that are provided by GitHub are listed here:

  • Tracking code changes: GitHub helps track changes to the code, which means it maintains a history of our code. This enables us to view revisions of our code base made during any time period.
  • Documentation: GitHub provides features for adding documentation, Wikis, and so on to our code bases, and these can be written using the simple markdown language.
  • Graphs and reporting: GitHub provides insight into various metrics, including how many additions and deletions were made to the code, who the top contributors were, and who has the most commits.
  • Bug tracking: Since GitHub tracks all the activities made at every point in time, when something breaks, we can easily backtrack to the point that broke the code. We can also integrate third-party tools such as Travis for continuous integration, which helps us to track and identify bugs easily.
  • Collaboration is easy: GitHub tracks every activity done by every collaborator working on the project and also sends email notifications about the same. It also provides social media features, such as feeds, comments, emojis, and mentions.
  • Hosting our own website: We can also host our own website with GitHub using a feature called GitHub pages. We just need to create a repo for our own project and host it using GitHub pages, which will then make the website applicable to the URL: https://<username>.github.io.

Using GitHub

GitHub is very easy to use. However, to get started using GitHub, we need to least know about a few terminologies that are used in GitHub:

  • Repository/Repo: A repository is a place where all of our code bases are stored. A repository can be either private or public.
  • ssh-key: ssh-key is a way to authorize in GitHub. It stores our identities.
  • Branch: A branch can be defined as multiple states of a repository. The primary branch of any repository is the master branch. Multiple users can work in parallel on different branches.
  • Commit: A commit makes it easy to distinguish between different states of a file at a given time. When we make a commit, a unique identifier is assigned to that commit so what it's easy to check what changes were made in that commit. A commit takes a message as a parameter to describe the type of change that is being made.
  • Push: A push sends the commit that we made back to our repository.
  • Pull: As opposed to pushing, pulling fetches the commit from the remote repository to our local project.
  • Merge: Merging is basically done between multiple branches. It is used to apply changes from one branch to another.
  • Pull requests: Creating a pull request is basically sending the changes that we made to our code base for the approval of other developers. We can start discussions on a pull request to check the quality of code and ensure that the changes don't break anything.
To learn more about the vocabulary used in GitHub, visit https://help.github.com/articles/github-glossary/.

Setting up a GitHub repository

Now that we know the basics of GitHub, let's get started creating a GitHub repository for the project we want to build:

  1. First, create a folder for the application in the root folder. Let's name this application blog:
 $ mkdir blog
  1. Create an account on GitHub at https://github.com/.
  2. Go to your profile. Under the Repositories tab, click New as follows:
  1. Name this repository blog.
  2. Now, on the Terminal, go to the location of this application and initialize an empty repository with this command:
 $ cd blog
$ git init
  1. Now, let's create a file called README.md and write a description for the application and then save it:
 $ echo 'Blog' > README.md
  1. Add this file to GitHub:
 $ git add README.md
  1. Add a commit so that we have a history of this change of code:
 $ git commit -m 'Initial Commit'
  1. Now, to link the local application with the remote repository in GitHub, use this command:
$ git remote add origin https://github.com/{github_username}/blog.git
  1. Finally, we need to push this commit to GitHub:
 $ git push -u origin master

When it's done, visit the GitHub repository where you will find a history of the commits made to our repository, as follows:

That's it. Now, when we want to write changes, we will first create a branch and push the changes to the branch.