Read the full tutorial here:
Not yet published
This application detailed the step by step guide on how to build a modern chat application using Laravel, Vue.js and CometChat.
This demo uses:
To run the demo follow these steps:
- Head to the CometChat dashboard (you'll need to create a free account if you haven't already)
- From the dashboard, create a new app called "laravel-chat-app" or use any name you prefer
- Once created, click the button Explore
- Click API Keys on the left-hand-side and note the automatically-generated REST API Key and the application ID as well
- Download the repository here or by running
git clone https://github.com/yemiwebby/laravel-chat-app.git - Run
composer installto install all the dependencies for the backend (Laravel) - Run
npm installto install all the dependencies for the frontend (Vuejs) - Create a
.envfile with the root folder of the project, then copy the content.env.exampleand paste it in the newly created file. - Next, locate the following variables within the
.envfile and replace the placeholders with the appropriate credentials:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=YOUR_DB_NAME
DB_USERNAME=YOUR_DB_USERNAME
DB_PASSWORD=YOUR_DB_PASSWORD
MIX_COMMETCHAT_API_KEY=YOUR_COMMETCHAT_API_KEY
MIX_COMMETCHAT_APP_ID=YOUR_COMMETCHAT_APP_ID
MIX_COMMETCHAT_APP_REGION=YOUR_COMETCHAT_APP_REGION
- Next, run the following command to create tables for your database:
php artisan migrate-
Open the project in two separate terminal. From one of the terminals, run
php artisan serveto start the backend andnpm run watchfrom the other to start the frontend application in watch mode. -
You can go ahead and register two different users. Once you are done, log in from two different browsers with the credentials of the users created and start a chat session.