Update all readmes

OMikkel · Nov 25, 2023 · 279d0df · 279d0df
1 parent e56e28f
commit 279d0df
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -1,48 +1,133 @@
 # FiveM NUI NextJS Boilerplate - Get started quickly with the right tools
 
+Click this button to create a new repository based on this template.
+
+[![Use this template](https://img.shields.io/badge/-Use%20this%20template-blue?style=for-the-badge)](https://github.com/new?template_name=fivem-nextjs-boilerplate&template_owner=OMikkel)
+
 ## Features
 
-- ### Typescript - <https://www.typescriptlang.org/>
-- ### NextJS 13 - <https://nextjs.org/>
-- ### Next-themes - <https://www.npmjs.com/package/next-themes>
-- ### Tailwindcss - <https://tailwindcss.com/>
-- ### FiveM Integration
+- Typescript - <https://www.typescriptlang.org/>
+- NextJS 14 - <https://nextjs.org/>
+- Next-themes - <https://www.npmjs.com/package/next-themes>
+- Tailwindcss - <https://tailwindcss.com/>
+- Redux Toolkit - <https://redux-toolkit.js.org/>
+- FiveM Integration
+
+## Important
+
+> If you choose to rename the folder `fivem-nextjs-example` to something else, make sure to update the `NEXT_PUBLIC_RESOURCE_NAME` in the [`.env`](/ui/.env) file. in the `ui` folder
+
+> If you are using vercel to deploy your ui, make sure to update the environment variables in the vercel dashboard
+
+## Getting Started
+
+### FiveM Resource
+
+1. Clone this repository or download it as a zip file.
+2. Extract the zip file (if you downloaded it as a zip file).
+3. Move the folder `fivem-nextjs-example` to your resources folder.
+4. Add `ensure fivem-nextjs-example` to your `server.cfg` file.
+5. Update ui_page url in `fxmanifest.lua` to your ui deployment url
+6. Edit `config.lua` to your liking.
+7. Start your server.
+
+### NextJS UI
+
+#### Deploy via Vercel
+
+1. Create a new repository from the template button (upper right corner)
+2. Create a new project on https://vercel.com/new
+3. Connect your github repository to vercel
+4. Add the environment variables from [`.env`](/ui/.env) in the vercel dashboard
+5. Deploy your project
+6. Update ui_page url in `fxmanifest.lua` to your ui deployment url
+7. Start your server.
+
+#### Deploy manually
+
+1. Clone this repository or download it as a zip file.
+2. Extract the zip file (if you downloaded it as a zip file).
+3. Go to the `ui` folder.
+4. Run `npm install` or `yarn install` or `pnpm install` to install the dependencies.
+5. Run `npm run build` or `yarn build` or `pnpm build` to build the project.
+6. Run `npm run start` or `yarn start` or `pnpm start` to start the project.
+7. Update ui_page url in `fxmanifest.lua` to your ui deployment url
+8. Start your server.
+
+## Usage
+
+> Join your server and press the hotkey (default: `H`) to open the menu.
 
-## FiveM Integration
+## Learn More about NextJS
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## How does it work?
 
 ### Send data to the UI from FiveM Client
 
+#### FiveM Client
+
 ```lua
+-- client.lua
 SendNUIMessage({
-    type = "app/setState", -- Redux type sliceName/reducer
-    data = {
-        valueOne = "FiveM",
-        valueTwo = 10,
-        buttonClicked = true
-    }
+    type = "app/setDisplay", -- Redux type sliceName/reducer
+    data = true/false, -- Redux payload
 })
 ```
 
+#### UI
+
+```js
+// state/reducers/app.ts
+const appSlice = createSlice({
+	name: "app", // sliceName
+	initialState,
+	reducers: {
+		// reducer
+		setDisplay: (state, action: PayloadAction<boolean>) => {
+			state.display = action.payload; // action.payload is the data from the FiveM client
+		},
+	},
+});
+```
+
 ### Get data from the FiveM Client
 
-**UI**
+#### UI
 
 ```js
-sendNuiCallback(
-	"/callbackToClient",
-	{
-		valueOne: "TEST",
-	},
-	(response) => {
-		console.log(response); // OUTPUT: TEST 1
-	}
-);
+// app/page.tsx
+const getPlayerCount = () => {
+	// Call FiveM client
+	nuiCallback("/getPlayerCount", {}, (result: number) => {
+		setPlayerCount(result); // Set React state
+	});
+};
 ```
 
-**FiveM Client**
+#### FiveM Client
+
+```lua
+-- client.lua
+RegisterNUICallback("getPlayerCount", function(data, cb)
+    TriggerServerEvent(cfg.resourceName..":getPlayerCount") -- Ask server for data
+    RegisterNetEvent(cfg.resourceName..":getPlayerCount")
+    AddEventHandler(cfg.resourceName..":getPlayerCount", function(count)
+        cb(count) -- Send server response back to ui
+    end)
+end)
+```
 
 ```lua
-RegisterNUICallback("callbackToClient", function(data, cb)
-    cb(data.valueOne.." 1")
+-- server.lua
+RegisterServerEvent(cfg.resourceName..":getPlayerCount")
+AddEventHandler(cfg.resourceName..":getPlayerCount", function()
+    TriggerClientEvent(cfg.resourceName..":getPlayerCount", source, GetNumPlayerIndices()) -- Respond to client with player count
 end)
 ```
diff --git a/fivem/fivem-nextjs-example/README.md b/fivem/fivem-nextjs-example/README.md
@@ -0,0 +1,25 @@
+# FiveM resource
+
+This is the FiveM Resource for the nextjs example
+
+Use this as a starting point for your next FiveM project.
+
+## Important
+
+> If you choose to rename the folder `fivem-nextjs-example` to something else, make sure to update the `NEXT_PUBLIC_RESOURCE_NAME` in the [`.env`](/ui/.env) file. in the `ui` folder
+
+> If you are using vercel to deploy your ui, make sure to update the environment variables in the vercel dashboard
+
+## Installation
+
+1. Clone this repository or download it as a zip file.
+2. Extract the zip file (if you downloaded it as a zip file).
+3. Move the folder `fivem-nextjs-example` to your resources folder.
+4. Add `ensure fivem-nextjs-example` to your `server.cfg` file.
+5. Update ui_page url in `fxmanifest.lua` to your ui deployment url
+6. Edit `config.lua` to your liking.
+7. Start your server.
+
+## Usage
+
+> Join your server and press the hotkey (default: `H`) to open the menu.
diff --git a/ui/README.md b/ui/README.md
@@ -1,24 +1,41 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# NextJS NUI Example
 
-## Getting Started
+This is the ui for the nextjs fivem example
 
-First, run the development server:
+Use this as a starting point for your next FiveM NUI project.
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun run dev
-```
+## Important
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+> If you choose to rename the folder `fivem-nextjs-example` to something else, make sure to update the `NEXT_PUBLIC_RESOURCE_NAME` in the [`.env`](/ui/.env) file. in the `ui` folder
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+> If you are using vercel to deploy your ui, make sure to update the environment variables in the vercel dashboard
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## Installation
+
+### Deploy via Vercel
+
+1. Create a new repository from the template button (upper right corner)
+2. Create a new project on https://vercel.com/new
+3. Connect your github repository to vercel
+4. Add the environment variables from [`.env`](/ui/.env) in the vercel dashboard
+5. Deploy your project
+6. Update ui_page url in `fxmanifest.lua` to your ui deployment url
+7. Start your server.
+
+### Deploy manually
+
+1. Clone this repository or download it as a zip file.
+2. Extract the zip file (if you downloaded it as a zip file).
+3. Go to the `ui` folder.
+4. Run `npm install` or `yarn install` or `pnpm install` to install the dependencies.
+5. Run `npm run build` or `yarn build` or `pnpm build` to build the project.
+6. Run `npm run start` or `yarn start` or `pnpm start` to start the project.
+7. Update ui_page url in `fxmanifest.lua` to your ui deployment url
+8. Start your server.
+
+## Usage
+
+> Join your server and press the hotkey (default: `H`) to open the menu.
 
 ## Learn More
 
@@ -28,9 +45,3 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
@@ -14,7 +14,7 @@ export default function Home() {
 
 	if (!display && !searchParams.get("preview")) return null;
 
-	const getPlayerCount = async () => {
+	const getPlayerCount = () => {
 		nuiCallback("/getPlayerCount", {}, (result: number) => {
 			setPlayerCount(result);
 		});