mern chart app

聊天應用

這是一個像其他任何應用程序一樣普通的Web應用程序。完全響應，移動的第一次侵犯。使用Mern堆棧構建。託管Netlify。

開始

您可以在這裡看到這個項目。

與

這些是該項目中使用的主要技術。

• MongoDB-基於NOSQL文檔的數據庫
• ExpressJS -NODEJS Web和移動應用程序框架
• React-用於構建用戶界面的JavaScript庫
• Redux- JS應用程序可預測的狀態容器
• Nodejs -JavaScript運行時引擎構建了Chrome的V8 JavaScript引擎A，該引擎在Web瀏覽器外運行JavaScript

其他一些技術是

• SASS- CSS的預處理器腳本語言
• React-Bootstrap- UI組件最受歡迎的前端框架
• Bootstrap-最受歡迎的前端框架
• 推動器 - 為移動和網絡的實時體驗供電
• JWT- JSON Web令牌是一種開放的行業標準RFC 7519方法，用於在兩方之間牢固地表示索賠
• Mongoose-Mongoose提供了一個基於架構的直接，基於模式的解決方案，以建模您的應用程序數據
• Multer-用於從表單數據中刪除文件的軟件包
• PUG-用於服務器端渲染的模板生成器。

本地設置

客戶端和服務器具有單獨的存儲庫，因此將在不同的根級目錄同時運行兩個服務器。因此，將它們分開。

先決條件

安裝節點，npm和git。

服務器設置

 git clone https://github.com/ramankarki/chat-app-api.git

cd chat-app-api

npm install nodemon -g

npm install

在root中創建一個config.env文件，並添加一些env變量。

 NODE_ENV=development
DB_STRING=your mongodb database string

// I have used sendgrid to send emails,
// create a sendgrid account and after your setup is done add your credentials here

SENDGRID_USERNAME=your sendgrid username
SENDGRID_PW=your sendgrid password
EMAIL_FROM=email from which you are sending mails.

JWT_SECRET=any random string you want (preferred min 32 strings)
JWT_EXPIRES_IN=expiry date for your jwt tokens
JWT_COOKIE_EXPIRES_IN=expiry date for your cookies

// I have used pusher to make this app real time
// create a pusher account and after your setup is done add your credentials here

PUSHER_APP_ID=your pusher app id
PUSHER_KEY=your pusher app key
PUSHER_SECRET_KEY=your pusher secret key
PUSHER_CLUSTER=your pusher app cluster

現在您已經完成了，可以啟動開發服務器

 npm run dev

客戶端設置

git clone https://github.com/ramankarki/chat-app-client.git

cd chat-app-client

npm install

在root中創建.env文件並添加一個Env變量，因為我已經使用了SASS。

 SASS_PATH=node_modules:src/*

在 /src文件夾內創建一個配置文件夾，然後在配置文件夾中創建dev.js文件以添加一些秘密鍵。

 module.exports = {
  PUSHER_KEY: "YOUR PUSHER KEY FOR CLIENT SIDE",
  PUSHER_CLUSTER: "YOUR PUSHER CLUTER",
};

現在您也已經為客戶端完成了，並且可以啟動您的React開發服務器

 npm run dev

現在，它應該在您的默認瀏覽器上打開此聊天應用的主頁