Building a real-time chat application can seem daunting at first, but with the right tools and guidance, you can create a robust system that allows real-time communication between users. In this article, we will walk through setting up the Astro Chat application, which is built using VueJS, Express, Socket.IO, and MongoDB.

Contents

• Demo
• Tech Stack
• Features
• Installation
• Seeding Data
• Running Tests
• Configuration Setup
• Contribute

Demo

You can view the application in action at Astro Chat Live. To see the project management cycle, check out the Astro Chat Project Kanban (Trello).

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	sass-lang.com
Babel	JavaScript Compiler	babeljs.io
Webpack	JavaScript Module Bundler	webpack.js.org
NodeJS	Open Source, JavaScript Run Time Environment	nodejs.org
VueJS	Progressive JavaScript Framework	vuejs.org
Jest	JavaScript Testing Framework	jestjs.io
Express	Web Framework for Node.js	expressjs.com
MongoDB	NoSQL Database	mongodb.com

Features

• Uses Express as the web framework.
• Implements stateless authentication with JWT tokens.
• Social authentication via Passport.
• Hashes passwords utilizing the bcryptjs package.
• Real-time communication enabled with Socket.IO.
• Stores data using MongoDB and Mongo Atlas.
• Server logging with Winston and Morgan.
• Runs both server and client simultaneously using Concurrently.
• Roles and levels set using Vue.js.
• Continuous integration achieved with Travis CI.
• Deployment managed by Heroku.

Installation

Follow these steps to get the application up and running locally:

1. Clone or Download the Repository: Choose whether to use SSH or HTTPS.

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

2. Install Dependencies: Run npm install in the root, client, and server directories.
3. Add Environment Variables: Create a .env file in the server folder and fill it out based on .env.example. This setup is crucial for the application to run.
4. Set Environment Variables: Ensure you have NODE_ENV=development and HEROKU_DEPLOYMENT=false.
5. Start the Application: Use the command below to run the app locally.

bash
$ npm run dev

Your application will now be live on localhost:8080.

Run Production Ready Mode

Follow similar steps as above, but ensure NODE_ENV=production and utilize the command npm run start to initiate the application.

Deploying to Heroku

To deploy your application on Heroku, ensure you have the Heroku CLI installed:

1. Login to Heroku via CLI:

bash
$ heroku login

2. Create a new Heroku application:

bash
$ heroku create

3. Set configuration variables via the Heroku dashboard as described in the README.
4. Commit changes and push to Heroku:

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

Seeding Data

If you want to seed some dummy data during development, you can easily execute the command below:

bash
$ npm run seed:data

Running Tests

It is essential to run tests before every commit:

• To run both client and server tests:

javascript
$ npm run test

• To run client tests:

javascript
$ npm run client:test

• To observe server tests:

javascript
$ npm run server:test:watch

Configuration Setup

To ensure your application functions correctly, you’ll need the following environment variables set up:

• Local Environment Variables: Create a .env file similar to this:

bash
NODE_ENV=development
HEROKU_DEPLOYMENT=false
DATABASE_URL=DATABASE_URL
EXPRESS_SESSION_KEY=EXPRESS_SESSION_KEY
JWT_SECRET=JWT_SECRET
GOOGLE_CLIENT_ID=GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET=GOOGLE_CLIENT_SECRET
FACEBOOK_CLIENT_ID=FACEBOOK_CLIENT_ID
FACEBOOK_CLIENT_SECRET=FACEBOOK_CLIENT_SECRET
PORT=PORT

Contribute

This project has been built as a personal learning experience. Those wishing to contribute are welcome to create issues, submit pull requests, or offer ideas for improvement!

Troubleshooting Tips

Should you encounter any issues during setup or deployment, consider the following troubleshooting tips:

• Ensure all dependencies are installed correctly in each directory.
• Check your .env configuration for any missing or incorrect values.
• Run tests to catch issues early in the development process.
• If deploying to Heroku, confirm your configuration variables are set correctly in the settings.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.