Skip to content

yishanhsieh/NodeJS-Blog.github.io

 
 

Repository files navigation

NodeJs, Express, EJS & MongoDB Blog - CRUD

This repo is used for learning to building a NodeJs blog and how to run it on a free host. I am really appreciate Raddy's efforts for the 10 videos and open source code.

Video playlists:

  1. Part1 : Import npm and all the other required libraries. Build up a HelloWorld page.

  2. Part2: render basic personal information through main.ejs, which renders index.ejs and about.ejs.

  3. Part3: Layout design on style.css

  4. Part4: build up search.ejs, connect to MongoDB, create database schema.

    • Remember to put on /blog in the end of your MONGODB_URL, or your mongoDB table will be named 'test' automatically, but it still works.
  5. Part5: insert Post data in MongoDB to index.ejs.

    • DB table is automatically built up after we create schema (in model folder).
  6. Part6: create slug for each blog. create the logics for searchbar.

  7. Part7: create Sign in and register pages in /admin

  8. Part8: create cookie, bcrypt(store pwd), jwt,

  • in 8'17 of Part8 video, register page is commented out after registering one admin user, which is saved in the MongoDB USER table.
  • This episode is not easy. Remember to create JWT in .env. You can check your token from 'inspect'.
  1. Part9: create admin dashboard page, add post.
  2. Part10: add 'edit' & 'delete' in dashboard page.

Installation

  • To install and run this project - install dependencies using npm and then start your server:
$ npm install
$ npm run dev
  • (option) VScode EJS language support: beautify the display of EJS
  • NodeJs
  • Database (MongoDB) Free Cluster (https://www.mongodb.com/) sign up by your Google account. You can reference from Part 4 video.
  • after git clone, you have to import all the libraries used in the project under the project folder.
npm i bcrypt connect-mongo cookie-parser dotenv ejs express express-ejs-layouts express-session jsonwebtoken method-override mongoose
  • Also, you need to import nodemon
npm i nodemon --save-dev
  • Create a .env file to store your credentials. After you sign up MongoDB, you can copy a url like below.
MONGODB_URI=mongodb+srv://<username>:<password>@clusterName.xxxxxxx.mongodb.net/blog
JWT_SECRET=MySecretBlog
  • try to run on local. The default port is 5000, but you can change if it is occupied.

Host on Cyclic

  • change the start script in package.json. It should be "node app.js"
"scripts": {
    "start": "node app.js",
  • change the port from 5000 to 3000. (According to the instructon of Cyclic)
const PORT = process.env.PORT || 3000;
  • create an account in Cyclic
  • connect your github account with Cyclic.
  • get an web url. Check the IP address of the url.
  • Paste your MONGODB_URL at the variable page on Cyclic.
  • add IP address on MongoDB atlas: including your Cyclic web ip and 0.0.0.0 (connect everywhere)
  • It should work.

----------------Know more about Raddy-------------

Design Files

The Blog layout is available in a Figma(.fig) file located under the "Design Files".

View Live Figma Prototype

YouTube Channels

Subscribe to TheNetNinja Subscribe to RaddyDev

Website

www.raddy.dev

Donations

Buy Raddy a Coffee

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 51.7%
  • EJS 27.0%
  • CSS 21.3%