DEV Community: Keely

Blog with Node, MongoDB, and React

Keely — Wed, 12 Jan 2022 04:46:57 +0000

1.11.22
It's been awhile since I've coded... yay post-bootcamp burnout. I'm starting my 100 Days of Code challenge to rework the bootcamp assignments using React.

I read a Twitter thread (which I've lost) but it got me motivated to get back to my code practice. I wrote down "backend headless cms - node, mongoDB, and react."

So, I'll be researching headless CMS which at initial glance looks like a hot topic right now.

What is a headless cms? From Contentful, "A headless CMS is any type of back-end content management system where the content repository "body" is separated or decoupled from the presentation layer "head." Content that is housed in a headless CMS is delivered via APIs for seamless display across different devices... structuring content so that it can be reused across different platforms and channels."

...

Before I go too far down a rabbit hole... I need to get re-familiar with how to set up an app.

While I go through my notes, I guess the real start of this project is figuring out my objective and a design draft.

Project Overview

I enjoy spending my time reading and writing about a range of topics, recent adventures, and new findings. I want to build a CMS blog where I can publish blog posts, short stories, notes, and life updates and allow of comments on posts... creating a "Digital Oasis".

User Story

As a developer who writes
I want a CMS-style blog site
So that I can publish my content

MVP

Home
Blog Page
Blog Post
Login
Blog Entry
Logged-In Blog Post State

Road Map

In no particular order...
Theming/CSS, Comments, Newsletter Signup, Content Sections, Calendar

Edit: I started this project with a massive starter pack that we used during the final project of bootcamp. I ended up scrapping most of it and rebuilding from point zero because I needed to work my way back up.

1.17.22
I'm back... a week later, still going strong in the green. I've done a few things. Set up bootstrap and got a few components rendering with React.

Here are my next steps for this week:

Seed the database
Pull content from the database into the blog post

1.22.22
So, I still have not seeded the database but I have reworked my server side folders and have done the following:

Set up server
Create env file
Finished setting up models
Started routes

Right now I just have the scaffolding for the routes but that will be my next couple of days.

Overall thoughts right now: I definitely learned a lot during coding bootcamp and it's all coming back piece by piece. The reason why I got into coding was because I like the puzzle aspect. It's really nice to get to put this together without the breakneck speed and pressure of the bootcamp.

Express + Mongo Simplified

Keely — Thu, 02 Sep 2021 23:48:34 +0000

More notes I was taking in class to capture the steps to use Mongo DB and express routes... WIP

*File List: *
package.json
.env
config.js
index.js
routes.js
controller.js

Getting started, we are using the zoo database.

Because we have everything installed, Mongo is always running in the background

package.json

Will need to add the following:
*express
*mongodb
*dotenv

.env

Copy string from mongosh and add to this file.
Also add the port number here.

config.js

Use this file to connect the env with the rest of the application, export

import dot env from 'dotenv';
dotenv.config();
export default {
port: process.env.PORT || 3000,
db: proces.env.DB_CLIENT_URL
};

If the port number is not provided in env file, it will default to 3000 (aka short circuit pattern).

Next, import config into index.js

loader.js

Use this to set up the mongo client & export it out.

import { MongoClient } from "mongodb";
import config from "./config.js";

const client = new MongoClient(config.db);

client
  .connect()
  .then(() => {
    console.info("Connected to MongoDB");
  })
  .catch((err) => {
    console.error("Error starting MongoDB Client");
    process.exit(1);
    // using "1" as exit code because it's not a graceful exit
    // using "0" as exit code because it's a graceful exit
  });

process.on("SIGINT", () => {
  client.close().then(() => {
    console.info("MongoDB connection closed");
    process.exit(0);
  });
});

export default client;

index.js

*import
*declare
*get path, call back
*listen
... everything between localhost:3000/ and localhost:3000/api

routes.js

*import
*declare
*get path, call back
*use

controller.js

Creating a method that connects to the database collection we want to use... then import it into routes.js

const controller = {
async index()
 {
const animals = await client.db("zoo")
.collection("animals")
.find()
.toArray();
return animals;
}}

.find creates a cursor that allows us to go into the array and do stuff like filter or sort.
We can pass in a parameter into the index() that will allow us to use the fields in the routes... will need to interpolate using a bracket when calling it.

routes.js

create a route that gets all the animals
http://localhost:3000/animals

import animalsController from "./controller.js"
router.get("/animals", async (_, res)=>{
const animals = await animalsController.index();
res.json(animals);
}

Create a route that sorts by a field
http://localhost:3000/animals?sort=class
In the route we will add the parameters into the path and then we'll need to interpolate that parameter in the controller.

const controller = {
async index(sortBy)
 {
const animals = await client.db("zoo")
.collection("animals")
.find()
.sort({ name: 1 })
.toArray();
return animals;
}}

And then we'll need to update the router to include the sort parameter

import animalsController from "./controller.js"
router.get("/animals", async (req, res)=>{
const animals = await animalsController.index(req.query.sort);
res.json(animals);
}

CRUD Routes

FROM HERE WE STARTED USING A NEW DATABASE FOR A NOTE TAKER APP
Mongo DB is going to create a new collection dynamically. Won't need to set anything up beforehand since we already have everything connected in the .env.

First, need to add json middleware to index.js

import morgan from "morgan"
app.use(morgan("dev"))
app.use(express.json());

Morgan logs the routes in node

Mount the routes

import apiRouter from "./router.js"
app.use("/api", apiRouter)

POST

Starting the post route to create a new note
http://localhost:3000/api/

router.post("/", (req, res)=>{
res.json(req.body);
});

Practicing iterative coding...
Go back to the controller.

import client from "./loader.js";
export default {
 create(newNote) {
return client.db("noteTaker").collection("notes").insertOne(newNote);
}
}

Then add controller to routes file.

import noteController from "./controller.js"
router.post("/", (req, res)=>{
const newNote = await noteController.create(req.body);
res.json(req.body);
});

Add in try/catch for errors in the route

router.post("/notes", async (req, res)=>{
try {
const newNote = await noteController.create(req.body);
res.json(req.body);
} catch (error) {
rest.status(400).json(error.message)
}
});

GET

Prints all the notes in the database.

Starting with the routes:

router.get("/notes", async (req, res) => {
try {
const notes = await noteController.index();
res.json(notes)
} catch (error) {
res.state(400).json(error.message)}
}

then add to the controller...
This file is using the mongo db library of methods.
Link to those methods

import client from "./loader.js";
export default {
index() {
return notesConnection.find({}).toArray();
},
 create(newNote) {
return client.db("noteTaker").collection("notes").insertOne(newNote);
}
}

GET

Print 1 note (instead of all the notes)
In the controller we can use .findOne(id)

show(id) {
return notesConnection.findOne(ObjectId(id));
}

Adding to routes, we'll need to use a dynamic path. We'll also need to add in params

router.get("/notes/:id", async (req, res) => {
try {
const note = await noteController.show(req.params.id);
res.json(note);
} catch(error) {
res.status(400).send(error);
}
})

DELETE

Delete a note... going to skip the routes since this is a review.
In the controller, we'll need to use .deleteOne and pass in the id as an object.

delete(id) {
 return notesConnection.deleteOne({ _id: ObjectId(id) });
}

MVC file structure notes

Keely — Fri, 06 Aug 2021 02:58:02 +0000

Homework: Blog

New File Structure

server.js > adding in many new packages that will need to be started to run all these files simultaneously

Controllers

Replaces routes
index.js (similar, uses router object rather than app)
home-routes.js (Express code, addition is a snippet that connects the router to a view)
api > index.js, user-routes.js (ie. this is using Express to save login variables

Utils

new
helpers.js
In this example, this is adding formatting and pulling in time and date. Separate middleware from routes. If a piece of code is used in multiple routes, can pull that out into it's own file that each route can tap into as needed.

Views

new
Basically these files are creating html code that can pull in data from the database and are strung together using Express.
Pages not nested in other folders here but they are using the file in the layout to complete the page. The partial files are components that are used on multiple pages.

Public

new
"Static" code that the Views files pull from.
CSS
Images
JS > login.js, logout.js

no change
Config
db
Models
Seeds

Documentation:
https://www.npmjs.com/package/express-handlebars << this is the one listed out in the dependencies of the package.json
https://www.npmjs.com/package/express

WIP => Making Sense of ORM Chaos

Keely — Tue, 03 Aug 2021 23:11:24 +0000

Getting lost in the sauce that is setting EVERYTHING up for ORM projects.

Node.js is the language to build and talk to a server. Express is a framework to make that easier. Bootstrap is to CSS as Express is to Node.js.

I'm working through setting up an ecommerce backend by modifying starter code and configuring a working Express.js API to use Sequelize to interact with a MySQL database. S

So I'll need to do a few things in the set up.

The Set Up

Add npm files to package.json and update with name of project (include sequelize, express, dotenv, mysql2)

Look through the package json to see what's already been set up for commands to run - run seed, nodemon

npm i sequelize
npm i express
npm i dotenv
npm i mysql2

these were all included in the code provided in wustl
Copy server file (express)
Create connection folder and copy over connection.js file
Create .env file and update db name for project

Set up database

mysql -u root -p
SOURCE schema.sql
quit
npm run seed

run server
node server.js

The Data

When actually starting to code, we need to start by setting up the Models. But first, let's visualize the data by working our way back from Routes.

In the database, each table will require it's own model and route. These are all brought together using "index.js" located in each folder.
So the main route index pulls all the routes together under /api to be used in the server file. We are expected to get JSON back.

[localhost:3002/api]

The router folder index creates the paths for each individual route set up: /travellers, /locations, /trips.

[localhost:3002/api/travellers]

And then the Models index links together the individual models traveller, location, trip

[localhost:3002/api/:traveller]

Seeds

We were provided with Seeds which gives us an example of each data table that should be created which can then help us build the models

Models

Set up Model folder and models
Add references snippets to Models
Create model index: Product, Category, Tag, ProductTag

Define columns for each column (Add validation, include decimals)
Extend Product model to set up fields and rules (need to figure out where this is used and then complete)
Finish model index

Validation Scaffolding:

user.init({id: {}, username:{type:, validate: {}},sequelize...});

Indexing Models

.hasOne
Define a Driver as having one License to create a foreign key in the license table. Also define the association starting with License. If driver is deleted, cascade also deleted the associated License.

Driver.hasOne(License, {
foreignKey: 'driver_id',
onDelete: 'CASCADE'

.belongsTo

License.belongsTo(Driver, {
foreignKey: 'driver_id',

.hasMany
Define a Driver as having many Cars, thus creating a foreign key in the 'car' table.

Driver.hasMany(Car, {
foreignKey: 'driver_id',
onDelete: 'CASCADE', });
Car.belongsTo(Driver, {
foreignKey: 'driver_id', });

.belongsToMany
Define the third table needed to store the foreign keys

Location.belongsToMany(Traveller, {
through: {
model: Trip,
unique: false}, 
as: 'location_travellers'});

How to test these... run the seeds through the database.

Routes

Index has been set up for us: /categories, /products, /tags

To Dos:

Category Routes & Insomnia set up
Product Routes & Insomnia set up
Tag Routes & Insomnia set up

GET

The purpose of the GET route is to find all the data and return as json so we can then use that data in other areas/services (ie. all locations). Can also bring in filtered data (ie. a single location).

Async Await scaffolding:

router.get('/', async (req, res) => {try{}catch(err){}}

I started to set up my first GET route in Insomnia to test, and ran into to do item in the body-parser. This is part of express middleware that needs to be configured.

Misc. Notes

What do the different status codes mean for each?
Are we supposed to push to github with our .env file included?
add to .gitignore >> the name of that file is there so we don't need to worry about it in this project

Documentation:
https://www.npmjs.com/package/sequelize
https://www.npmjs.com/package/express
https://www.npmjs.com/package/dotenv
https://www.npmjs.com/package/mysql2

Branching Out

Keely — Sat, 12 Jun 2021 20:51:18 +0000

Mapping out the Git Branching steps for my first group development project & reflections on the bootcamp so far...

Git Branching Steps

I wanted to capture a bit of the process -- how I understand it -- here to serve as a reference for me and my group as we start to memorize the steps for working together using Git Branches.

In the designated Feature branch...

In the Github Project Kanban, move card from To Do to In progress
git pull origin dev
git switch -c [feature-name]
Make and save changes in VS Code
git add -A
git commit -m "Short description of update"
git push origin [feature-name]
In the Github Project Kanban, move card from In progress to Review

Whoever did not push the code, reviews the changes. If approved, the PM pulls the request into the dev branch and deletes the feature branch.

Instructor's Tip: Commit small incremental commits to avoid conflicts

But first... I had to get the repo onto my machine.

Cloning the repo and the initial commit

Our assigned lead developer created new Repository
I clicked the Code dropdown to copy the SSH link
In Git Bash, git clone [pasted SSH link]
Then, entered the directory with cd [directory-name]
Switched to a new branch with git checkout -b keely
Made a small change to the html file using VSC
Followed steps to add, commit, push change

git add -A git commit -m "Update HTML title in head" git push origin keely

Instructor's Tip: Instead of naming the branches as our own names, name the branches the features of our project

Beginning Reflections

7 weeks in this coding bootcamp... sheesh! I knew it was going to be tough and I'm still hanging in there! I know the reward will be mighty and after talking to a few classmates, our excitement is growing together as we start to recognize our progress and potential.

We just started our first group project after a few tough weeks of learning JavaScript and my goal by the end of this project is to have "clicked" with the foundations so I can continue to grow.

I am thankful for all the support I've been receiving - from classmates, my tutor, the TAs/instructor, and my partner in crime/life. The hardest part was -- I hate to say it -- asking for help.

In the last week or so, I've been wanting to start capturing this process of my own growth and was jotting down potential writing prompts in my notes so I was excited when my instructor pointed me to this site! Cheers to documenting growth! 🍻

Stay tuned or let me know if you have any tips along the way!