November 14, 2018

Developing with Vue.js, Node.js, and MongoDB

1 hour 10 minutes

We've been hard at work, learning a new development stack on which the HTML All The Things website is built.

Note: Matt is on vacation for 1.5 weeks, this episode has been pre-recorded before his departure, some things that were discussed may have a different status (hopefully complete) upon the release of the episode.

Segment 1 - VueJS Frontend Development

Due to the nature of VueJS, we spun up an entirely new development environment

Switching from Notepad++ to Visual Studio Code w/ the Vetur plugin

Some of the most valuable/used parts of VueJS that we used include:

Components - are like small pieces that makeup the website, placed in separate files and used over and over again, can be imported into each other (component inside a component)

Scoped Stylesheets - limit the styles you're applying to the file you're writing them in, we limited many styles to specific components, allows you to use the same classnames and ids with completely different properties

Dynamic data was the most challenging part of using VueJS, not from a technical perspective, but more so from a procedural standpoint - not used to having them as apart of my workflow

Vuex, Vue Router, Axios

Vuex is a state management solution in vue that allows all components to share data between each other

We use it for storing our loggedIn status for our editing content

Vue router is used for handling any routes so that we can navigate around our site

Segment 2 - Nodejs and MongoDB Backend Development

Nodejs

Used as our server to serve webpage content from the Mongo Database and store content in the mongo database

The server has be handle many calls to it that request things like:

Get all content

Get content of a specific type

Add content of a specific type

Delete content

Authentication

These are standard server requests but still took some time to setup as we’ve never hooked in vue.js into Node, usually use the built in templating engines

MongoDB

A alternative to sql that stores objects in json blocks

Has great hookins into Nodejs using the Mongoose package

Used to store our content block data and admin user account for editing the site

Had to implement mongo admin and database users so that even if our site is hacked they can’t delete or modify the entire mongo database

Segment 3 - Digital Ocean and Docker Deployment

Digital Ocean provides a vps with an already installed Docker instance.

Docker is a way to create small virualizable containers for each technology in your stack

In our case we used docker to create 3 containers:

Nginx - serve static files and proxy routes to Nodejs server

Nodejs - run our server infrastructure

MongoDB - runs our mondodb server that communicates with Nodejs

Had to learn how to create a docker compose file which is a configuration file for building your containers together and letting them know how to communicate

Everything is launched and built through a SSH into your digital ocean server. You have to be familiar with using a Command Line Interface (CLI)

Web News - Wrapping it Up

In this Web News we had a discussion regarding our current status (at the time of recording) in the development of the HTML All The Things website, as well as what to complete for deployment.

...more

View all episodes

By Matt Lawrence and Mike Karan

4.8

4848 ratings