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

现在，它应该在您的默认浏览器上打开此聊天应用的主页