Build a chat app with Laravel and Vue
Read the full tutorial here:
Not yet published
This application detailed the step by step guide on how to build a modern group chat application using Laravel, Vue.js and CometChat.
This demo uses:
Before proceeding to build This tutorial assumes you have:
A PHP development environment setup.
Git installed. Follow this link to download Git if otherwise
A global installation of composer, which will be used to install all dependencies for the project.
Note: Mac users can install composer using homebrew.
brew install composer
Node.js & NPM - Node.JS and Node Package Manager. You can download it here, if not installed.
Running the demo
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 "vue-group-chat" 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 Full access API Key and the application ID as well
- Go to the Groups tab and note the GUID of the group automatically created by CometChat
- Download the repository here or by running
git clone https://github.com/yemiwebby/vue-group-chat-app.git
composer installto install all the dependencies for the backend (Laravel)
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_GUID=YOUR_COMMETCHAT_GUID
- 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 and
npm 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.