A realtime chat app built using Laravel framework and Vue.JS frontend, powered by PubNub.
Full Tutorial for Setup
Before proceeding to build this application, make sure that you have the following software packages installed
XAMPP - A popular Apache distribution which also contains MySql and PHP.
Composer - PHP Package Manager
Note: Mac users can install composer using homebrew. brew install composer
Node.js & NPM - Node.JS and Node Package Manager
To install Laravel CLI, perform the following commands from your terminal
Step 1: Install Laravel CLI
composer global require "laravel/installer
Step 2: Configure the path to access Laravel globally
setx /M path “%path%;%appdata%Composer\vendor\bin” set PATH=%PATH%;%USERPROFILE%AppDataRoamingComposer\vendor\bin Note: USERPROFILE is the Windows user name
Step 1: PubNub Signup
Signup for PubNub service and get your PubNub keys (Publish key, subscribe key and secret key)
Note: One the new keys are generated, you also have to enable "Storage & Playback" and "Access manager" features for them.
Step 2: Start Apache & MySQL servers
Open the XAMPP control panel and start the Apache server and MySQL server.
Step 3: Clone the repo
Clone this repository under the web root folder of XAMPP Apache web server. The default webroot folder in XAMPP is "htdocs".
Step 4: Update configuration
In the cloned repository, update the following files with the configuration parameters as follows.
Open the file PubnubConfig.php and update the following
- Line 19: Replace the placeholder <PUBNUB_PUBLISH_KEY> with your PubNub publish key
- Line 20: Replace the placeholder <PUBNUB_SUBSCRIBE_KEY> with your PubNub subscribe key
- Line 21: Replace the placeholder <PUBNUB_SECRET_KEY> with your PubNub secret key
Open the domainconfig.js file and update the following
- Line 1: Replace the placeholder <HOST_OR_IP> with your web servers root address. If you are running the XAMPP locally then "localhost" is the root address.
Open the pubnubconfig.js file and update the following
- Line 3: Replace the placeholder <PUBNUB_PUBLISH_KEY> with your PubNub publish key
- Line 4: Replace the placeholder <PUBNUB_SUBSCRIBE_KEY> with your PubNub subscribe key
- Line 5: Replace the placeholder <PUBNUB_SECRET_KEY> with your PubNub secret key
OPTIONAL- In case you are changing the default configuration for Apache and MySQL or testing on a different server instead on the local computer then open the .ENV file and update the following
- Line 10: Set the DB_HOST value to the IP address of the database host server
- Line 11: Set the DB_PORT value to the port number of the database
- Line 13: Set the DB_USERNAME value to the database username. Default user name is "root"
- Line 14: Set the DB_PASSWORD value to the database password. Default password is none so the value is left blank.
Step 5: Database setup
Open PhPMyAdmin web console and import the sql file to create a new database (named chatapp) for the application.
From the repository root path, run the following commands to install dependencies for Laravel and Vue
composer install npm install
Generate autoload.php to aggregate all vendor dependencies
Compile the run Vue application
npm run watch
Launch the chat app via your web browser by pointing to the URL
http://<HOST_OR_IP>/LaravelBasicChatApp/public where <HOST_OR_IP> is your web server's root address Note: Make sure to check the XAMPP control panel and ensure that the Apache and MySQL servers are running.