## 📍 Overview
The project is a boilerplate for building real-time chat applications using Next.js 13(app router) and Socket.IO.
It can automatically switch API based on `npm run prod` or `npm run dev`.
On the backend, It provides a simple Express server-side setup to simulate a production environment when using `npm run prod`. Or it will use mocked Socket.io API in development enviroment.
On the frontend, I encasulate Socket.IO hander into a lightweight state management library [Zustand](https://zustand-demo.pmnd.rs/) and invoke them in chatroom components.
The project aims to streamline the development of real-time chat applications by providing a foundation with essential features and integrations.
## 🚀 Getting Started
### 🖥 Installation
1. Clone the nextjs-13-socketio-boilerplate repository:
```sh
git clone https://github.com/ttpss930141011/nextjs-13-socketio-boilerplate
```
2. Change to the project directory:
```sh
cd nextjs-13-socketio-boilerplate/frontend
# and
cd nextjs-13-socketio-boilerplate/backend
```
3. Install the dependencies:
```sh
pnpm install
```
### 🤖 Using nextjs-13-socketio-boilerplate
On the backend, you need to customize your enviroment variables certainly based on OS in package.json.
For me, my os is windows, so in the dev command it have a **SET** NODE_ENV=development command but it don't need it Linux/Mac.
#### Development enviroment
In development, frontend will rise a request to its mocked api server but backend server.
> Hint: Or you can use `npm run prod` in frontend and change **NEXT_PUBLIC_SOCKET_URL** as `ws://localhost:3001` in .env.production to rise a request to backend server.
```sh
# frondend
npm run dev
# backend
npm run dev
```
#### Production enviroment
In production, frontend will rise a request to express backend server.
```sh
# frondend
npm run prod
# backend
npm run prod
```
### Deploy nextjs-13-socketio-boilerplate
#### Backend deployment
I deploy the backend project in [Render](https://dashboard.render.com/).
Render is a cloud application hosting service company designed for developers. It provides a simple and easy-to-use platform that allows developers to quickly and easily deploy their applications to the cloud. Render's services include:
- Automatic deployment: Render can automatically deploy your application to the cloud without any manual intervention.
- Automatic scaling: Render can automatically scale your application to meet your needs without any manual management.
- Automatic monitoring: Render can automatically monitor your application and notify you when problems occur.
- Automatic backup: Render can automatically backup your application to prevent accidental loss.
The following is the parameters suggestions when setting backend project.
| Type | Parameter |
| :--------------- | :----------------------------------------- |
| `Name` | `
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository) file for additional info.