From 841c59ff7a96caefafa4752e1b02ada1b70b4d06 Mon Sep 17 00:00:00 2001 From: Justin Xiao Date: Sat, 22 Jul 2023 19:23:53 +0800 Subject: [PATCH] docs: updated README.md --- README.md | 128 ++++++++++++++++++++++++-- frontend/public/chatroom.png | Bin 0 -> 1977 bytes frontend/public/powered-by-vercel.svg | 6 ++ 3 files changed, 128 insertions(+), 6 deletions(-) create mode 100644 frontend/public/chatroom.png create mode 100644 frontend/public/powered-by-vercel.svg diff --git a/README.md b/README.md index 3101a2f..259bea8 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,125 @@ -# nextjs13-socketio-boilerplate +
+

+ +
+nextjs-13-socketio-boilerplate +

+

◦ A simple chat app with Socket.io, Next.js 13, Mantine and Zustand.

+

◦ Developed with the software and tools listed below.

-[![License MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](./LICENSE) -Made with TypeScript -Powered by Vercel +

+JavaScript +Prettier +PostCSS +Autoprefixer +Redis +Nodemon +React +Axios + +ESLint +SemVer +tsnode +TypeScript +Socket.io +Express +JSON +Markdown +

+ +![GitHub top language](https://img.shields.io/github/languages/top/ttpss930141011/nextjs-13-socketio-boilerplate?style&color=5D6D7E) +![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/ttpss930141011/nextjs-13-socketio-boilerplate?style&color=5D6D7E) +![GitHub commit activity](https://img.shields.io/github/commit-activity/m/ttpss930141011/nextjs-13-socketio-boilerplate?style&color=5D6D7E) +![GitHub license](https://img.shields.io/github/license/ttpss930141011/nextjs-13-socketio-boilerplate?style&color=5D6D7E) + +
+ +## 📍 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` | `------` | +| `Branch` | `main` | +| `Root Directory` | `./backend` | +| `Build Command` | `yarn build` | +| `Start Command` | `NODE_ENV=production node build/server.js` | + +Finally, you need to set the **CORS_URL** in enviroment varible in Render enviroment varible in project's tab. + +#### Frontend deployment +You can just deploy on [Vercel](vercel.com) by clicking the following buttom,and set **NEXT_PUBLIC_SOCKET_URL** as your backend server url on Render. + +Powered by Vercel -## Project Description -This boilerplate \ No newline at end of file +## 📄 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. diff --git a/frontend/public/chatroom.png b/frontend/public/chatroom.png new file mode 100644 index 0000000000000000000000000000000000000000..9013426c295f7570da938b03a06c926b4431d1e2 GIT binary patch literal 1977 zcmV;q2S)gbP)0g2>ik&O?p}0AaEr+k`bV;p>c(_h3e|O;lG1{uv}= zHjhMBjzsFvR%f-5YY4H&Z6of%Y`h?nbpj@#?2|KV3gpwYiBFtZ`~V~+$%y->7x3~G ztNE7ickrsy)x4uK$ou+2e0Vs_hlhvdpD%Y@k^i@4`wqTz`3Led4r;-`)Tx1IEt41g zGhalQHpIVpL0JXgd*Bcch5C7_=nIATp8bdTg3=17gz&K?@?OjWNTj_n#7ir9UBjQ; zF4WYWH>D=)!;LcZ(Qy*v_$aJvET-1*BMd5la6!Q&_Xl*l7Y zCFS9_=9Tic_70wDw6?YLIdd0fN(;U+t@i4bU$|ri@9FL3PT^)xFJHKLx$OcFFljdD z@KiPrtI} zEfUpoSjfXQQ_Qu-A})0wm7g^N z_#HbPqkw6Vc7&%2a=_agVlc=fe-)c29@iqx^En^vG92copLg3P0I#2vB)5H$tW)pv zMq8cKcaDe8=2<2`(i$+Adg^t@g1OigCkU9XNF+af`cvxFHwtp3o(3MSeLa2hN~`s7 zsrRhznANrQHfaG_nZ)+l!jaW4tI(YYsBE}lntkL|ngAxHDRfEV^Gn}LUjsx^nkWE~ z)+ikyw%1wvv~1p#Ptb9UyZ0STUjzKCFowKaWX~uOA7p5HiH&sqaGW?iA-{@kr--`BVK)srwJj@gb|s$)A;;6BNm$xYZ{G%0J6juGU@s_^pl)Ugara zFsOR=j=B$AN!TLwuz1<3bOazJ6iWq>e6DnWd|s1&=t6?ZW<&s>1^xeMzT&%WKUf!l zNY5wP{^$Xv!>Kd1ngd6I8g5YM&c~qUMPD22s zGRY1=E-4+LlA|dA2yZjw{1ODvQl>eN_Kr^L_Mc09i5h^(b)`dZZ=dGCF{@|A37T82bQ)!O#g*k$CV@kysdPC`kkf#>U`<@00X};(&~Jg-G_#TENTE*lRzGzKEc%$ zK>bwb1W=!2uK+}HOS347RJS$sO`tF>CuqtsnlXW!Jyz8JlceNRa)K@QrxS#`M!H21 zgvmj3+u)|e$!bJ%(dOon*0q+LpmgDjD zU?$S`5x43Cr2dQc1VYL7{dlAn3Ky9dKf`DP{y*i zBz8`B%riCCOJY#&^ZIAJsw)H}l1k-);*zC291iOXp|8=#qG*HeSTL8lB}*&|;EpET z^kFtpTL5{po>OZ9l%fqW*p-$~kZpeOn&B`zcKwzn`H`LBKXCdwTEJGR4@Tgi(ioCl z#){t}bz9SHU2m_(#Y=7STx=15Y!0kgQvk4UB1{^U&TuRRvA0=3B?pQb5Xwf6#(dER zM`JBzT)Mhhx7rgA82in)OKc=hn%y~p=k<--@!f-u=HU$o9;GqduwmQjpi6oCH$%YGQ&EFMtg00000 LNkvXXu0mjf_{F@B literal 0 HcmV?d00001 diff --git a/frontend/public/powered-by-vercel.svg b/frontend/public/powered-by-vercel.svg new file mode 100644 index 0000000..77524f1 --- /dev/null +++ b/frontend/public/powered-by-vercel.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file