Code Monkey home page Code Monkey logo

nest-react-blog-ga's Introduction

Build a blog using Nest.js, TypeScript, React and MongoDB

Application repo for a simple blog application built with Nest.js, TypeScript, React and MongoDB.

Getting Started

This prototype is divided into two separate sections. Namely the Backend ( Built with Nest.js) and the frontend ( Built with React ).

Install TypeScript globally on your machine if you don't have it installed already:

npm install -g typescript

Clone the repository

To easily set up the application, clone this repository which contains directory for both sections of the project ( i.e blog-backend and blog-frontend)

git clone https://github.com/yemiwebby/nest-react-project.git

Change directory into the newly cloned project

cd nest-react-project

Backend

Change directory into the backend

cd blog-backend

Install backend dependencies

npm install

Create .env file

Once the installation process is complete, create a .env file:

touch .env

Open the newly created file and add the following code:

AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
AUTH0_AUDIENCE=YOUR_AUTH0_AUDIENCE

Ensure that you replace the YOUR_AUTH0_DOMAIN and YOUR_AUTH0_AUDIENCE placeholder with the appropriate credentials as obtained from your Auth0 dashboard.

MongoDB

Ensure that you have mongoDB installed on your machine before running the application. I have this fully setup on my mac already.

Start mongoDB:

sudo mongod

Run the application

Open another terminal and still within the blog-backend project directory run the application with:

npm run start:dev

This will start the backend application on port 5000. This was modified to avoid confliction with the frontend application which by default will run on port 3000

Frontend

Open another terminal from the nest-react-project and navigate to the blog-frontend folder to setup the frontend

Frontend dependencies

cd blog-frontend
npm install

Run the frontend app

npm start

Create .env file and include Auth0 App credentials

Create a .env file as shown here:

touch .env

Open the file and paste the following code in it:

REACT_APP_AUTH0_CLIENT_ID=YOUR_AUTH0_CLIENT_ID
REACT_APP_AUTH0_DOMAIN=YOUR_AUTH0_DOMAIN
REACT_APP_AUTH0_AUDIENCE=YOUR_AUTH0_AUDIENCE
REACT_APP_AUTH0_REDIRECT_URI=http://localhost:3000
REACT_APP_BASEURL=http://localhost:3000

Replace YOUR_AUTH0_CLIENT_ID, YOUR_AUTH0_DOMAIN and YOUR_AUTH0_AUDIENCE placeholder with your Auth0 credentials.

Test the application

Finally open your browser and view the application on http://localhost:3000

Prerequisites

Node.js, Yarn package manager, MongoDB and TypeScript

Built With

Nest.js React.js Auth0 TypeScript MongoDB

nest-react-blog-ga's People

Contributors

yemiwebby 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.