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

HTML All The Things - Web Development, Web Design, Small Business

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.