Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Create a Modern Web App With Node, Express, and Vue.js

Introduction

01:33
  • Overview
  • Transcript

Do you want to write modern web apps? Apps with rich, interactive user interfaces that communicate with RESTful APIs on the server? If so, you've come to the right place!

In this course, Jeremy McPeak will walk you through the steps of writing a modern, JavaScript-powered web app using Vue.js with Node, Express, and MongoDB. You'll start by creating a simple back-end REST API that will power your app. Then you'll go on to build a complete front-end with the popular Vue.js framework. You'll learn data models, routing, authentication and more, while you create a complete full-stack web app.

Learn Vue.js

Learn Vue.js with our complete Vue.js tutorial guide, whether you're a seasoned coder or a web designer looking to pick up new front-end development techniques.

1. Introduction

1.1 Introduction

So you want to write modern web applications that have rich interactive user interfaces that communicate with RESTful APIs on the server. Well, I can't blame you. Because, after all, that is the pinnacle of modern web application development. But it can also be rather daunting because writing modern web apps requires a different approach than traditional web applications, but thankfully we have very good tools for writing modern single page applications. Hi, my name is Jeremy McPeak, and I invite you to spend a few hours with me as we build a modern web application. It's a cryptocurrency portfolio, and we'll write the whole thing with JavaScript and HTML templates. Yep, our client will be using Vue.js and we'll use Node.js and express the power our RESTful API. We'll start at the very beginning with a walkthrough of the tools that you need as well as a very brief intro to the world of cryptocurrencies. From there, we'll dive right in and start writing our application. We'll design and write UIs for displaying, editing, and deleting information, and we'll write the web API endpoints to make it all work. You'll learn how to authenticate users using authorization tokens and protect your API with custom middleware. You'll also learn how to use Vue Router to enforce security on your client. Now we have a lot of ground to cover. So, when you're ready, queue up the next video and we will get started.

1.2 What You Need

Before we dive in and start writing our application, let's briefly go over what you need to follow along in this course, and the most obvious is Node.js. So if you don't already have it installed, go to nodejs.org, download and install the LTS, which stands for long-term support, take the defaults, and you're good to go. The version number may be different. It will be even, so 8, 10, 12, depending upon whenever you view this course. It really doesn't matter in our case, just take the LTS and you're good to go. So once you have that installed, the next thing you need is a database, and I am using MongoDB. This is a NoSQL database, You can also call it a document database. But this is typically used with Node applications, well, not typically, it is commonly used, I should say, with Node applications, and there are two options. You can download and install MongoDB on your computer, if you want to go that route, or you can use the cloud solution called Atlas, which I think is funny, Cloud Atlas. There is a free tier, so if you wanted to, you can create an account and use the free tier, and that's what I am doing, I am using Atlas for this application. Now, there are some things that you do have to do. You have to whitelist your IP address. Now, that's not done through your network settings, that's done through the Atlas platform. And the reason being because it's going to block any attempt to connect to the databases, unless if you whitelist your IP address. So just whitelist your IP address, and then you will need to create a username and password for your database. But once you've done that, then you have everything you need to connect. And you can click on this CONNECT button, and then you can connect your application, and there are two options. There are the SRV connection string, and then the standard connection string, and we want to use the standard connection string, so just click on that. It's going to show your connection string, you can copy it, and then use that within your application, and we will be doing that soon. And then the third thing is Vue CLI 3. Now, of course, we are going to install this using NPM, so there's nothing really to download right now, but we are essentially going to have two projects. We will have our server project, which is going to be Node and Express, that's going to be our restful API and all of that. And then we will have the client project, which is going to consume that restful API, and that's going to be done with Vue. And the Vue CLI is just going to make it easier to get up and running with an environment. So you will need two command line windows, one for our server application, and then one for our client application. So with that out of the way, let's briefly talk about blockchain technology, because if you're not familiar with blockchain, then our goal might be a little confusing, maybe. A blockchain is not a database, but it is a ledger, and it is an immutable ledger. So that means that it keeps track of all of the transactions that occur, and once a transaction occurs, it cannot be undone. That transaction is on the blockchain for everybody who has access to that blockchain to see. Now, the vast majority of cryptocurrencies have a public blockchain. This means that everyone can go and look at the blockchain, see the transactions. And also, see the accounts, and where those transactions come from and where they go to, as well as the account balances. Now, that sounds scary, and yeah, I guess it could be, but nobody really knows what account belongs to what person or persons, unless, if that person says, hey, this is my account. So it is anonymous in that sense, and there are some currencies that are centered around privacy and don't allow you to do those types of things. I mean, there still is a blockchain, but you can't actually look at people's balances and see the transactions, but the vast majority are publicly available. And the biggest is bitcoin, so this is a block explorer for the bitcoin network. Basically, that means that we can look at the blocks on the blockchain, because the blocks contain the information about the transactions that occur. So here, we have a block number 547914, that's a lot of blocks. And if we click on this block, we are going to see all of the information contained in that block. We can see the total amount of transactions, and the fees that were involved, because there are fees whenever you make a transaction in just about any cryptocurrency. But if we scroll on down, we can see all of the transactions that are in this block. Over on the left-hand side, we can see where the transaction is coming from, and the amount, then we can see where it is going to. And the reason why we see two things is one is the fee, and the other is where the rest of the transaction went to. So if we click on any one of these, you're going to see this rather long string here, that is what we call an address. You can think of it as an account. So let's click on this one here. And if we look at this address, we can see how much bitcoin it has received, how much bitcoin it has sent, and its balance. Well, that's not a good example. Let's find one that has a balance, and unfortunately, we just have to click and look at it and see. That one, 0, that's probably the same one that I just clicked. Let's try this one, okay, here we go, we have a balance here. So this one has received 24 bitcoin, which is a lot of money, it has sent 24.2, and it still has 0.43 left, and we can also see the transactions. So we can see the incoming transactions and the outgoing transactions as well, and different currencies have different blockchains. So if you are someone who invests in several different currencies, or this is your hobby and you mine them, or you own a stake in them, you might want to keep track of all of your balances. And so what our project is going to do is allow us to track the balances of several different currencies. Now, the problem there is that there are many different block explores for any given currency. Like for example, for bitcoin, you can find different block explorers, because different people have wanted to create their own explorer. Now, they all give the same information because they are all looking at the bitcoin network. But there are some that supply a web API that you can use, there are some that do not, and of course, they are going to be different based upon who wrote those services. So as you start dealing with multiple currencies, then it just compounds the issue, because different people than the ones that wrote the bitcoin explorers wrote explorers for other currencies. However, there is a person, or a group of people, called CryptoCore, and they create block explorers. In fact, they have a service kind of like what we are going to do, where you can monitor the balances of several addresses. But if you go to monitor.ccore.online, and then just create a new seed, there's no username and password or anything like that, you can just go in and you can look at the supported currencies. And they have created a blockchain explore for each one of these currencies, and the great thing is they all have a unified API. So you query them the same, you get a payload that is the same, and that's going to make our life so much easier. So we are going to use their service, well, their services, I should say, in order to query whatever currency that we want, and to get our account balances. One is going to be Stipend, there's several here that we can choose, because there are several good projects here. Now, I do need to give a disclaimer here. Cryptocurrencies is a hobby of mine, it has been for almost two years, and while I have fun with it, I don't want to encourage anybody to get into it, because it is extremely volatile. It's also a haven for scams and thieves, because people have used it as a get rich quick. They will create a currency, they will get people to come and spend real money on it, and then they will just run. In fact, on this supported currencies, if you scroll down, they have a list of what they think are scams. The vast majority of these are definitely scams. There are some that I'm not sure about, this MYCE, but if it's marked as a scam, it's a pretty good chance that it's a scam. And there's no guarantee that any of these are going to be around. There are some projects, I think, that are doing well, and I think that they will continue to do well. But don't take what I say as, well, Jeremy said that I should get into PHORE, which I think is a great project, but yeah. I do not give any investment advice, I do not do anything like that, because if you saw my track record, you would definitely not want my advice, so there you go. In the next lesson, we will get started, we will set up our project, and start writing our application.