Giter VIP home page Giter VIP logo

avmesquita / blog-with-nestjs-and-angular Goto Github PK

View Code? Open in Web Editor NEW

This project forked from thomasoliver545/blog-with-nestjs-and-angular

0.0 1.0 0.0 3.2 MB

Blog with NestJS (Observables used) and Angular (dockerized Project). -- Register, Login, Publish Articles, Manage Articles (Title, Image, Markdown Text, etc) --

JavaScript 0.74% TypeScript 8.44% HTML 90.45% Dockerfile 0.10% SCSS 0.28%

blog-with-nestjs-and-angular's Introduction

If you are coming from a specific video, you can have a look at the commits, they are named like: 'video-01: asd', 'video-02: asd', so you can switch to a commit/merge commit and see what exactly had been done, since this repo is currently evolving and sometimes parts of it are rewritten in newer videos.
Hint: Upon 2022 the new features are not prefixed like this anymore (cause there isn't a video for every step anymore).

Updated 2022 (Project now dockerized)

  1. Angular is updated to v13 and NestJS is updated to v8.
  2. This Project is now dockerized.
    We have one Dockerfile for the api (NestJS) and one for the frontend(Angular).
    On the top file level there is a docker-compose.yml file that you can start, there is also the database and everything configured. So you don't need to do anything else than run docker-compose up.

(A Video covering these updates will be released within January 2022).

Instructions to run the Project

With Docker

Command:
docker-compose up
and then visit localhost:4200

Tipps & Tricks for docker

If you need to remove docker images or containers you can use one of the following commands.

Command to remove all images:
docker rmi -f $(docker images -a -q)

Command to remove all containers:
docker rm -vf $(docker ps -a -q)

Without Docker

2. Add an environment file to the project

Add a .env file in the api folder (at the top of your api folder, so nest can find it)

  • add your own DATABASE_URL in the .env file
  • add your own JWT_SECRET in the .env file

Database:
Adding the Database Url is explained in the first video - https://www.youtube.com/watch?v=5pFKw5iLL4s
You can use the free database from www.elephantsql.com (explained in the first video)

JWT Secret:
Explained in the third video - https://www.youtube.com/watch?v=bbDDSylRM04

Example of file:

DATABASE_URL=<your url>  
JWT_SECRET=jklasjdoij897231na

Start the Backend in dev Mode after you added the .env file

cd api
npm install
npm run start:dev

Start the Frontend in dev Mode after you added the .env file

cd frontend
npm install
ng serve

Start the e2e tests

cd e2e
npm install
npm run cypress:open

Generate e2e Report (html)

npm run cypress:report

Youtube Playlist Links

Blog Project only NestJS Videos
https://www.youtube.com/playlist?list=PLVfq1luIZbSnytbsm2i8Ocf_hyUHTsqbZ

Blog Project only Angular Videos
https://www.youtube.com/playlist?list=PLVfq1luIZbSmAWiXmsjUsvdYRu7RdxzaM

Blog Project All Videos https://www.youtube.com/playlist?list=PLVfq1luIZbSmJIuw_EZVP9mFiMED5fGIn

Playlist 2022:

Other Links & Stuff

Link to Github Profile: https://github.com/ThomasOliver545
Link to Youtube Channel: https://www.youtube.com/channel/UCTZMwW4pq_B-o_KkpCtotGw
Link to Twitter: https://twitter.com/Thomas_OliverK

Since i am doing this in my freetime support via

  • "Github Sponsor"
  • "Github Follow"
  • "Youtube Follow"

etc. would be great.

blog-with-nestjs-and-angular's People

Contributors

dependabot[bot] avatar thomasoliver545 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.