DEV Community: Rhodlib

My first blog with MERN Stack (Front-end)

Rhodlib — Tue, 05 May 2020 20:09:10 +0000

All about my blog: Front-end

Front-end Blog: How?

In this article, I'll explain how i create the front end of my blog, technologies and examples, but this isn't a guide step-by-step. It's simple because this project just centered in the back-end.

here is all the code of the front-end

First read this

This front-end it's very simple, you can use Redux/Context for state managment, the back end is ready for load many users but i only have one, mine. i use this for posting articles, this blog don't have box comment because is for documenting and save quick information for me, like notes. also you can user prop-types for props(it's a very good practice and really necesary for developing). this blog don't have front-end validations for login, because this project is for practicing backend. for this reazons the front is very simple. Be creative!.

Index

Dependencies
- React
- React-router-dom
- history
- axios
- react-markdown
- react-spring
- momentjs
- react-loading-skeleton
Structure
- components
- routes
- utils

Dependencies

In the following step, I'll to explain these dependencies and why i use them.

React

Why react? i choose react because i think this is te most interesting library for JavaScript, very popular, you can get a lot of information about this on internet, you really can fell that u can take the controll of the app.

but react is only a choise, are many other popular framework/libraries as Angular or Vue, you can choose whatever you want. you can make the fron-end only with JavaScript and HTML5 and CSS, but is good start to think in components and create scalable and easy to mantain applications.

here is the official web of React

React-router-dom

Because React is a library we need to install all dependencies that are necesaries for our app.
react-router-dom is essencially if we need to work with routes, are other options like wouter is more simple and great to small projects, but i use react-router-dom because is more common to see in real projects.
I don't explain how use react-router-dom because here is a guide about this, and we can see a lot of post about how it's work.

history

history allow us to navigate between routes without a full page refresh, manage the history stack, navigate, and persist state between sessions.

here is all about history npm package.

How use history on my project? react-router-dom have your own history, you can use this using BrowserRouter, generally we us to see

import { BrowserRouter } from "react-router-dom";

this sentence call the BrowserRouter with your own history;

in the case you use the external history, you need to use Router, Router is inside of react-router-dom, is like BrowserRouter without a history.

import { Router } from "react-router-dom";

How install history? $ npm install --save history

How i use history on this project?

well, a good practice for me, is create a folder with the name utils and inside of this create a file called history.js.

history.js

// First import createBrowserHistory from history
import { createBrowserHistory } from "history";

// Then export the function.
export default createBrowserHistory();

and later in index.js at the src folder.

index.js - here is the full code

// Import history from utils
import history from "./utils/history";
// Import Router from react-router-dom
import { Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    // Use history inside of Router
    <Router history={history}>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

and this is all, we have history on the app.

Axios

As the npm package says, axios is a promise based HTTP client for the browser and node.js.

we can use fetch to make the requests, but i prefer axios because it make all the work for us and reponse with a JSON, we dont need to make a promise chaining only for that. and i like to work with async/await for asyncronus functions and try/catch for error handling.

here is the link to axios npm package.

React-mardown

Here is the star of the project, this npm package is the solution of all my problems with the markdown. Is a little dangerous save markdown one the backend, because anybody can execute an script, we need to create a purifyDOM, etc. With react-markdown we can save a String in the database with a markdown sintax and the front-end with react-markdown is encharge of transform this sintax on markdown, let's see.

import React from "react";
//Import react-markdown
import ReactMarkdown from "react-markdown";

//Create a component article
const Article = ({title, textString}) => (
    <div>
        <h1>{title}</h1>
        //Use ReactMarkdown with the textString(with markdown sintax) as source
        <ReactMarkdown source={textString}>
    </div>
):

export default Article;

and this is all, we can show strings with markdown sintax stored in the database as Markdown, in the website.

React-spring

this is a npm package to make animations and transitions in the components, isn't necessary but is a really interesting

I'll don't explain much about this because i not use this in the best way, i have a lot to learn, but here is all about react-spring, remember this is not a step-by-step guide, is an article about my first experience about MERN stack.

Moment JS

I use moment only for display a Date in the header of each blog, and for this is very simple. obviously are many uses, but for now is right for me.

How to install? $ npm install --save moment

How to use in my blog?

src/components/Blogheader/index.js - here is the full code.

import React from "react";
// Import moment
import moment from "moment";

// The createdAt prop is type Date storage in the database
const Blogheader = ({ title, description, createdAt }) => (
    <div>
        <h3>{title}</h3>
        <p>{description]}-{" "}
            <span>
                // Use moment, passing a Date and format
                {moment(createdAt).format("YYYY/MM/DD")}
            </span>
        </p>
    </div>
);

export default Blogheader;

React-loading-skeleton

This is a library to make a skeleton of your content for the view, i normaly prefer a loader. But is usual to see on social media pages, I just used it to test it.

here is all the information about this library

Structure

I will explain the structure that i use in the project, only three folders:

components
routes
utils

and two files app.js and index.js

Components

here are the components folder.
there is four more folders.

blogheader (It's the component with the title, description and date of creation that you can see when you enter on the website or see an article).
footer (It's the component with social links and copyright ).
header (It's the component with Title of the blog and links).
layout (It's the component where i made the layout is not necesary but is a good practice to me, to keep my components organized).

Routes

here are the routes of my proyect, there is four folders.

NewArticles ( this is the route for render the page to create new articles, you can see how this look here
Article (this route render the article)
Home (this route render the home)
Login (this route render the login page)

Utils

Only have a file called history.js where i create the history.

THE END

This is all about the front end of my blog, I hope you find it interesting!.

My first blog with MERN Stack (Back-end)

Rhodlib — Mon, 04 May 2020 19:20:50 +0000

All about my blog: Back-end

Back-end blog: How?

In this article, I am going to explain how I created the backend for my blog,
what technogies I used and why, this is not a step-by-step guide, it is only a resource if you don't know how to start making your own blog, maybe this can help you on the technologies you need to learn. We have a lot of information on the internet and sometimes it is a little difficult to find a correct answer to our problems.

All the code of my backend is here

Index

Dependencies
- ExpressJS
- Mongoose
- dotenv
- cors
- validator
- bcryptjs
- jsonwebtoken
- slugify
Database
- MongoDB
Structure
- Controllers
- db
- middlewares
- models
- routes

Dependencies

In a few words, I will try to explain these dependencies and why I use them.

ExpressJS

The language we use to make this blog is JavaScript, for that reason i use NodeJS for the backend, NodeJS allows us to run JavaScript on the server side.

ExpressJS is nothing more than a web framework for NodeJS, it is robust and has a lot of features to make our lives easier when using NodeJS, for example it allows us to configure a server in 6 lines of code or less.

const express = require("express"); // 1
const app = express(); // 2

app.listen(3000, function () {
  // 3
  console.log("Server listening on port 3000"); // 4
}); //5

Why ExpressJS? Because is the most popular framework for NodeJS, And when it comes to getting a job, it is the most demanded.
Are there other frameworks for NodeJS? Sure! we have other awesomes frameworks for NodeJS.
- Hapi
- Sails
- Koa
- Socket
- NestJS
- and much more
How can install express on my server folder? if you has the package.json file on your folder, only need to run the following command
$ npm install --save express
It's hard to use? No, you really have all the information you need in the official Docs

Mongoose and MongoDB

As the official website says, mongoose is a elegant mongodb object modeling for NodeJS, what does that mean?.

Well, MongoDB is a system of databases NoSQL(Not Only SQL),
is a document-based database, we can store information in
JSON (JavaScript Object Notation) format within documents and these documents are saved in collections with an ID provided by MongoDB.

But the only way we have to keep organized the data entering and leaving the database is mongoose. Has functions to create a Schema and models.

What is a Schema? Schema is an Object that allows us to declare certain values and generate validations before sending the data to the database. thus allowing us to manage the same structure in all the data that we store.

this is the schema of an article of my blog , this is how the article is store to the database

const { Schema, model } = require("mongoose");

const postSchema = new Schema(
  {
    image: String,
    title: {
      type: String,
      required: true,
    },
    description: String,
    markdown: {
      type: String,
      required: true,
    },
    createdAt: {
      type: Date,
      default: Date.now,
    },
    slug: {
      type: String,
      required: true,
      unique: true,
    },
  },
  {
    timestamps: true,
  }
);

const Post = model("Post", postSchema);

module.exports = Post;

with this schema we create the model that we are going to use to store, save, delete and read the articles in the database.

Mongoose also allows us to connect to the database in a very easy way.

const mongoose = require("mongoose");

const URI = "mongodb://localhost/dbtest";

mongoose.connect(URI);

const connection = mongoose.connection;

connection.once("open", () => console.log("DB is connected"));

Where can get more info about mongoose? mongoose has simple and easy-to-read docs

dotenv

dotenv is an npm package that allows us to create environment variables. An environment variable is a dynamic variable, it's as simple as writing a variable to an .env file and using it as a reference.
why do this? because we can protect sensitive information or data in the variable (database urls, passwords, tokens) when we upload the files to repositories or servers.

How can install dotenv in my project? $ npm install --save dotenv

How to configure dotenv to work with de project? only need to add a line of code in the top of the index.js.

require("dotenv").config();

and then, you can create a .env file in the root of your project. more info about dotnev here

Cors

Cors is simple, I use it because allows me to have two servers at the same time on a different port and to be able to communicate between them, the backend server with nodemon and the frontend server with npm start

How can install cors? $ npm install --save cors

How usage cors? in the index.js of server or wherever you have your app

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

more info about cors here

Validator

validator is a library of string validators and sanitizers

I use this on the User model, to validate the email property inside the userSchema

const validator = require("validator");

email: {
      type: String,
      required: true,
      unique: true,
      trim: true,
      lowercase: true,
      validate(value) {
        if (!validator.isEmail(value)) {
          throw new Error("Email is invalid");
        }
      },
    },

you can see the full code here

How can install validator? $ npm install --save validator

Where can learn more about validator? you read more here

bcryptjs

bcryptjs is an npm package to encrypt, I use this for encrypt passwords, is very easy to use and secure with more than 700k+ downloads per week.

How install bcryptjs? $ npm install --save bcryptjs

How i use bcryptjs?

I use bcrypt in two functions of the "User model", one is creating a method for the user model through the userSchema to encript password.

User.js - Here is all the code

const bcrypt = require("bcryptjs");

//Here i created a method for userSchema called encryptPassword
userSchema.methods.encryptPassword = async (password) => {
  // get the password
  return await bcrypt.hash(password, 8); // 8 is a cicle this been hashed 8 times
  // and then return the password hashed by a function of bcrypt
};

And later we need a function to desencrypt the password to validate password and for this I create a static method. static method is a function accesible in the model and not in the userObject

//Here i created a static method to find credentials and validate password
userSchema.statics.findByCredentials = async (email, password) => {
  //Get email and password
  const user = await User.findOne({ email }); //Search by email using the model (findOne is a static method)
  if (user) {
    // If user exist
    const isMatch = await bcrypt.compare(password, user.password);
    // use a function called compare from bcrypt and compare the password with the user.password in the database.
  }
};

Slugify

Slugify is an npm package to create a slug from a string.

What the f*ck is an slug? slug is than simple like this "hello-how-are-you", it's a string with dash instead of spaces.

Why i need slug? In this blog I use slug like a unique property of each article, using his title as slug, why? because I can search and article for slug and not necesary by ID.

This is te best solution? Not, because the best practice is use an ID, but is right for me.

How slug help you? It's simple, finding by id, the route in the front-end it's something like this blog.rhodlib.me/article/5468fds1684541sdf18546516s8 this is not estetic, isn't nice to see.
but if find by slug, the route is something like this blog.rhodlib.me/article/all-about-my-blog-backend-how

How can install slugify? $ npm install --save slugify

How use slugify? Is very easy, let's see.

Post.js here is all the code.

const slugify = require("slugify");

//the function pre of the postSchema allows us run a function between the validate and the store article on the database
postSchema.pre("validate", function (next) {
  const post = this;

  if (post.title) {
    post.slug = slugify(post.title, { lower: true, strict: true }); // We use slugify to create the slug with the title, before save the article in the database
  }

  next();
});

Where can get more info about slugify? you can go here

jsonwebtoken

jsonwebtoken is library to create validation tokens, I use this to validate user when they are connected in the app.

How use JWT in the blog? I use jwt in the following way.

User.js - here is de full code

const jwt = require("jsonwebtoken");

// here i created a method for each User called generateAuthToken
userSchema.methods.generateAuthToken = async function () {
  const user = this;

  const token = jwt.sign(
    // With jwt.sing() we create a token
    { _id: user._id.toString() }, // I pass the user id in an object
    process.env.AUTHTOKENSTRING // I use an environment variable to encrypt the token with a secret word
  );
  user.tokens = user.tokens.concat({ token }); // And then I put the new token in the user's token array
};

Structure

I will explain the structure that I use in the project.

In the server folder I create a src folder in the first level, inside of this folder I create five folder more called:

controllers
db
middlewares
models
routes

and two files app.js and index.js

Controllers

here I create the controllers of the routes, when a request enters the server, the path executes a function, that function is stored in the controllers.

auth.controller.js - here is the full code

const authCtrl = {};

authCtrl.registerUser = async (req, res) => {
  // Code
};

authCtrl.loginUser = async (req, res) => {
  // Code
};

module.exports = authCtrl;

DB

here I create a file called mongoose.js and store my access to database with mongoose.

Middlewares

here I create my middlewares, only have one. auth.js where realize the authorization for the login.

Models

here I create my two models, with their own schemas.

Routes

here I create the routes for the request. I have three files, within each one the routes are detailed:

auth.routes.js
post.routes.js
user.routes.js

auth.routes.js - here is the full code

const { loginUser } = require("../controllers/auth.controller");

router.post("/api/user/login", loginUser);

module.exports = router;

THE END

And this is all the backend of my blog, I hope you find it interesting and guide you in case you do not know how to start

My first blog with MERN Stack

Rhodlib — Sun, 03 May 2020 23:29:36 +0000

All about my blog: Why? What?

Let's start

This "guide" is for people who want to create a blog from scratch and do not know how to start, it doesn´t contain code or at least for the most part. it´s for guidance only.

In the following lines I´ll give you the details of the content of this publication, feel comfortable reading it or just go only to the part that interests you, I´ll hope you enjoy it.

Index

Why
What
- Front-end
- Back-end
- Database
- Utils
- Styling

Why?

I made a blog because I think it is the best way to practice. I used my knowledge of front-end and back-end.

A blog is a good quick-source in case you have to solve problems. it´s information in your own words. It´s like a notebook, but you can share that information with other people and learn together. Sharing information about programming with other people is what makes it a beautiful environment.

This blog was based on Markdown,because i love it and in think it´s simple elegant and very clear. it has a beautifull sintax.

More info about markdown here.

What technologies you use for this blog ?

Just like most internet pages this blot it´s based on a front-end a back-end and a database. I dicided to use a stack called MERN (MongoDB, Express, React, Node) in this particular case because it uses javascript on the client and server side.

Front-end

The front-end is the part of a website with which users interact. all you can see when you browse the internet,from fonts and colors to drop-down menus and sliders. As much as simple it seems,you may have a lot of functionality and complex code.

For the front-end of the blog i prefer the following technologies.

It seems a lot of things, but each of the dependencies are use on something in particular.

Link to front-end: how?

Back-end

The back-end consist of a server an application and a database. . it´s the data access layer of a software or any other device, which is not directly accessible by users,also contains the logic of the application that handles said data.

For the back-end of the blog I choose the following technologies

Database

The database is where we store all the data, in this case we storage users and articles.

I use MongoDB for my blog´s database.

MongoDB

Link to back-end: how?

Utils

The utils are the tools I use to develop, I don't need an article to explain them, because they all have their own documentation and are basic development tools.

VScode // Visual Studio Code
Chrome // Web browser
Insomnia // Desktop API client for REST simil to Postman
nodemon // npm package, it is used to keep the local server running

Styling

prettier // Tool for styling the code in the code editor
water.css // Is a collection of styles to make simple website, this stylizes the html semantics, It's simple and beautiful.