Configure and Run a Node.js API Powered by a Vue Application
First, we'll get a tour of the application and what it does then we will start configuring a fresh project.
The application UI is simple. It asks for a keyword and will search and display a random GIF from Giphy. Once you are satisfied with the image, you will be able to add a caption to it. The server will deconstruct the GIF frames, add the caption and re-create the GIF for you. Everything is then saved to a database so that all the users can benefit from your creations.
The tech involved to do this is a Vue frontend, Node.js backend, and MySQL database. I'll walk you through cloning, installing dependencies, configuring the giphy API key that we use, and starting the application. You'll notice at the end we'll need to configure the database. We'll get an error but this is expected!
Joel Lord: [0:00] The application we'll look at today is an application that will render GIFs from GIPHY and add a caption to it. This application is entirely built with JavaScript. It has a Node.js backend and a Vue.js frontend.
[0:14] The application UI is simple. It asks for a keyword. It will search and display a random GIF from GIPHY. Once you are satisfied with the image, you'll be able to add a caption to it. The server will deconstruct the GIF frames, add the caption, and recreate the GIF for you. Everything is then saved to a database so that all the users can benefit from your creations. Seems nice, right?
[0:38] Let's start building our application. First, let's clone the Git repository that contains all of our code. This can be done through your terminal by cloning github.com/joellord/k8s-course.git. Once the repository is cloned, you can see into that directory. In here, you should now have three folders -- one for the frontend, one for the backend, and one for your database.
[1:19] Let's go into our frontend. From here, we can run npm-install. That would install all the required dependencies for our frontend. Once this is done, you can run npm or run serve. This will start the Vue.js application. As you can see, my application is now running at localhost:8080. I can go to my browser, open up a new tab, go to localhost:8080, and I can see the application here.
[1:56] We've got "Animated Meme Generator," but nothing works for now. That's because we don't have a server started yet. Before we get started with our server, let's just go to GIPHY Developers. From here, you can click on Get Started. You can log into your account. From inside your account, you can create an application.
[2:30] Just use the SDK here. Use the next step. Let's start by giving it a name. We'll call it "Kubernetes Course," and the description will be "Course from Joel Lord on Egghead." We can check everything, create the application, and you should have your API key here.
[3:00] Go ahead. Copy that API key, and go back to your terminal. Here, I'll open up a new tab. I'll move from my frontend to the backend. You can see here that I have a file called API Keys. Let's open up a code editor. I can open up API Keys. In here, I will paste in the API key that I just got from GIPHY.
[3:36] Once this is done, you'll be ready to get started with the server. You can start the server by running npm-install to install all of the required dependencies. Use Node. to start the index.js file.
[3:55] Our server is now running. The Node.js backend has a help route that was built in by the team that had built this application. It can provide you with the status of your API. It checks the status of the server and the database and returns a status and a timestamp.
[4:15] Let's open up a new tab here, and let's try to do a cURL to localhost:3000/help. You can see here that we have an error. It says that, "Connection is refused." You can dig into the error trace to see where this error originates from, but you will notice that this error comes from the fact that we don't have a MySQL server running.
[4:42] Our application requires a connection to the database to list the previous gif creations from the visitors of this website. Without running a database, nothing works. How can we start a database without spending too much time configuring the said database? This is where our containers will come to help us.