Real Time Chat Application created with MEVN Stack

Astro Cha

Real Time Chat Application created with VueJS, Express, Socket IO and MongoDB/Mongoose/Mongo Altas.

Tech Stack

Technology	Description	Link ↘️
HTML5	Hyper Text Markup Language	----
CSS3	Cascading Style Sheets	----
JavaScript	High Level, Dynamic, Interpreted Language	----
SASS	Syntactically Awesome Style Sheets	https://sass-lang.com/
Babel	Javascript Compiler	https://babeljs.io/
Webpack	Javascript Module Bundler	https://webpack.js.org/
NodeJS	Open Source, Javascript Run Time Environment, Execute Javascript code for server side	https://nodejs.org/en/
VueJS	Progressive Javascript Framework	https://vuejs.org/
Jest	Javascript Testing Framework	https://jestjs.io/
Express	Web Framework for Node.js	https://expressjs.com/
MongoDB	NoSQL Database	https://www.mongodb.com/

Features

Express as the web framework on the server
Implements stateless authentication with JWT tokens
Authenticates JWT and social authentication using Passport
Hashes passwords using the bcryptjs package
Enables real time communication to the server using Socket IO
MongoDB and Mongo Atlas is used for storing and querying data
Server logging is done with Winston and Morgan
Concurrently is used to run both the server and client at the same time
Vue JS is used as the frontend framework
Travis CI is incorporated for continuous integration
Heroku is used for production deployment

Installation

Running Locally

Ensure Node.js and NPM are installed

Clone or Download the repository (Depending on whether you are using SSH or HTTPS)

$ git clone git@github.com:luvuong-le/astro-chat.git
$ cd astro-chat

Install dependencies for root, client and server

i. You may npm install in each directory or run the npm command below in the root directory for convenience

$ npm run setup

Add .env file to server folder and fill out details according to the .env.example. See configuration details for social auth and database setup
Start the application

$ npm run dev

Navigate to localhost:8080. The application should be up and running successfully

Deploying to Heroku

Ensure you have Heroku CLI installed

$ heroku login

Create a new heroku app

$ heroku create

Before pushing to heroku, you need to set up the config variables in other words the env variables you would use locally

i. Go to Settings -> Reveal Config Vars

ii. Add the config variables according to the .env.example

iii. These Include
```
DATABASE_URL
FACEBOOK_CLIENT_ID
FACEBOOK_CLIENT_SECRET
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
JWT_SECRET
NPM_CONFIG_PRODUCTION (Must be false)
PORT (Optional)
```
iv. Ensure that you add NPM_CONFIG_PRODUCTION to false to allow installation of dev dependencies for post build to work correctly
Commit any changes and push your code from local repo to your git

$ git add -A 
$ git commit -m "message here"
$ git push heroku master

Open the heroku app

$ heroku open

Note: You may also connect your github repo to the heroku and add automatic deployment on push to the github repo

Seeding Data

If at anytime in development you'd like to quickly seed some dummy data you use the command below

$ npm run seed:data

Running Tests

Tests should be run before every commit to ensure the build is not broken by any code changes.

Running Both Client and Server Tests

In the root directory
$ npm run test

Running Client Tests

$ npm run client:test

Watching Server Tests

$ npm run server:test:watch

Configuration Setup

These configuration setups are necessary for the app to function correctly as intended. These configuration setups will be required to be added as environment variables for the server to make use of.

MongoDB & Mongo Atlas

A MongoDB URI is needed to connect to a MongoDB connection. The easiest way to do this is to use Mongo Atlas. If you'd like to do this locally you can follow the instructions at (https://docs.mongodb.com/manual/installation/)

Mongo Atlas

Select 'Build a New Cluster' and follow the prompts
When the Cluster has been created, click on 'Connect'
Choose your connection method, for the purposes of this application we will use 'Connect Your Application'
Next you will need to grab this connection string (Standard connection string). This is the URI that will be used as an environment variable

JWT Secret

The JWT Secret is required as a way to keep the JWT Token secure when the signature is hashed. This secret key should be secret to you and should be updated periodically.

Google

To setup google oauth, you'll need to configure some details through Google Cloud Platform

Navigate to https://console.cloud.google.com/
Using 'APIs & Services', you'll need to enable the 'Google+ API'
Once enabled, click on 'Credentials'
Go to 'OAuth Consent Screen', you will need to add the 'Authorized Domains' to authorize your domain with Google
You will need to save the Client ID and Client Secret for use in the environment variables
You will also need to add the domain you are using ie. localhost or heroku to both 'Authorized Javascript Origins' and 'Authorized Redirect URIs'

i. The redirect URIs are in the format of domain/api/auth/provider/redirect

Facebook

To setup facebook oauth, you'll need to configure some details through Facebook for Developers

Login at https://developers.facebook.com/
Go to 'My Apps' and create a new app
Navigate to Settings -> basic
Save the App ID and App Secret for use in environment variables
Add your app domain in 'App Domains'
Under Products -> Facebook Login -> Settings, Add your redirect URIs under 'Valid OAuth Redirect URIs'

i. The redirect URIs are in the format of domain/api/auth/provider/redirect