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

Published: Nov. 14, 2018, 4 p.m.

b"We've been hard at work, learning a new development stack on which the HTML All The Things website is built.\\nNote: 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.\\nSegment 1 - VueJS Frontend Development\\nDue to the nature of VueJS, we spun up an entirely new development environment\\nSwitching from Notepad++ to Visual Studio Code w/ the Vetur plugin\\nSome of the most valuable/used parts of VueJS that we used include:\\nComponents - 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)\\nScoped 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\\n\\nDynamic 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\\nVuex, Vue Router, Axios\\nVuex is a state management solution in vue that allows all components to share data between each other\\nWe use it for storing our loggedIn status for our editing content\\nVue router is used for handling any routes so that we can navigate around our site\\n\\nSegment 2 - Nodejs and MongoDB Backend Development\\nNodejs\\nUsed as our server to serve webpage content from the Mongo Database and store content in the mongo database\\nThe server has be handle many calls to it that request things like:\\nGet all content\\nGet content of a specific type\\nAdd content of a specific type\\nDelete content\\nAuthentication\\n\\nThese are standard server requests but still took some time to setup as we\\u2019ve never hooked in vue.js into Node, usually use the built in templating engines\\n\\nMongoDB\\nA alternative to sql that stores objects in json blocks\\nHas great hookins into Nodejs using the Mongoose package\\nUsed to store our content block data and \\xa0admin user account for editing the site\\nHad to implement mongo admin and database users so that even if our site is hacked they can\\u2019t delete or modify the entire mongo database\\n\\nSegment 3 - Digital Ocean and Docker Deployment\\nDigital Ocean provides a vps with an already installed Docker instance.\\nDocker is a way to create small virualizable containers for each technology in your stack\\nIn our case we used docker to create 3 containers:\\nNginx - serve static files and proxy routes to Nodejs server\\nNodejs - run our server infrastructure\\nMongoDB - runs our mondodb server that communicates with Nodejs\\n\\nHad 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\\nEverything is launched and built through a SSH into your digital ocean server. You have to be familiar with using a Command Line Interface (CLI)\\nWeb News - Wrapping it Up\\nIn 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."