{"id":19819274,"url":"https://github.com/r3ps4j/cfx-angular-boilerplate-lua","last_synced_at":"2025-05-01T11:32:43.192Z","repository":{"id":162674918,"uuid":"573945856","full_name":"r3ps4J/cfx-angular-boilerplate-lua","owner":"r3ps4J","description":"Basic Angular \u0026 Lua boilerplate","archived":false,"fork":false,"pushed_at":"2024-01-16T18:27:25.000Z","size":214,"stargazers_count":5,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-14T22:33:23.743Z","etag":null,"topics":["angular","boilerplate","cfx","fivem","redm","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/r3ps4J.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-03T23:26:58.000Z","updated_at":"2024-05-01T16:26:36.513Z","dependencies_parsed_at":"2024-01-16T19:46:04.890Z","dependency_job_id":"da335478-752e-4895-8230-734e190b1cf1","html_url":"https://github.com/r3ps4J/cfx-angular-boilerplate-lua","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3ps4J%2Fcfx-angular-boilerplate-lua","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3ps4J%2Fcfx-angular-boilerplate-lua/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3ps4J%2Fcfx-angular-boilerplate-lua/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/r3ps4J%2Fcfx-angular-boilerplate-lua/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/r3ps4J","download_url":"https://codeload.github.com/r3ps4J/cfx-angular-boilerplate-lua/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224253423,"owners_count":17280963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","boilerplate","cfx","fivem","redm","typescript"],"created_at":"2024-11-12T10:18:24.193Z","updated_at":"2024-11-12T10:18:24.868Z","avatar_url":"https://github.com/r3ps4J.png","language":"TypeScript","readme":"# FiveM Angular and Lua Boilerplate\n\nThis repository is a basic boilerplate for getting started with Angular in NUI. It contains several helpful utilities and was generated with the [Angular CLI](https://github.com/angular/angular-cli). The project is set up with SCSS as stylesheet format. It is for both browser and in-game based development workflows.\n\nFor in-game workflows, run `npm run watch` which will watch the files and build the application upon changes.\n\nThis version of the boilerplate is meant for the CfxLua runtime, but should work with other languages if you copy over the `web` folder and the required `fxmanifest.lua` entries.\n\nThis boilerplate was heavily inspired by the [React boilerplate](https://github.com/project-error/fivem-react-boilerplate-lua) made by Project Error.\n\n## Requirements\n\n-   [Node ^18.13.0 || ^20.9.0](https://nodejs.org/en/)\n\n_A basic understanding of the modern web development workflow. If you don't know this yet, Angular will not be for you. To get started with Angular go to https://angular.io/start._\n\n## Getting Started\n\nFirst clone the repository or use the template option and place it within your `resources` folder\n\n### Installation\n\nInstall dependencies by navigating to the `web` folder within a terminal of your choice and type `npm i`.\n\n## Features\n\nThis boilerplate comes with some utilities and examples to work off of.\n\n### Lua Utils\n\n**SendAngularMessage**\n\nThis is a small wrapper for dispatching NUI messages. This is designed to be used with the `fromMessageAction` function of the NuiService in Angular.\n\nSignature\n\n```lua\n---@param action string The action you wish to target\n---@param data any The data you wish to send along with this action\nSendAngularMessage(action, data)\n```\n\nUsage\n\n```lua\nSendAngularMessage(\"setVisible\", true)\n```\n\n**debugPrint**\n\nA debug printing utility that is dependent on a convar,\nif the convar is set this will print out to the console.\n\nThe convar is dependent on the name given to the resource.\nIt follows this format `YOUR_RESOURCE_NAME-debugMode`\n\nTo turn on debugMode add `setr YOUR_RESOURCE_NAME-debugMode 1` to\nyour server.cfg or use the `setr` console command instead.\n\nSignature (Replicates `print`)\n\n```lua\n---@param ... any[] The arguments you wish to send\ndebugPrint(...)\n```\n\nUsage\n\n```lua\ndebugPrint(\"Is Angular better than React?\", true, someOtherVar)\n```\n\n### Angular Utils\n\nSignatures are not included for these utilities as the type definitions are sufficient enough.\n\n**fromMessageAction**\n\nThis function returns a subject which can be subscribed to to receive updates for a certain action. This is the primary way of creating passive listeners.\n\n_Note: You can register as many observers for the same action as you want._\n\n**Usage**\n\n```ts\nexport class MyComponent implements OnInit {\n\tcount: WritableSignal\u003cnumber\u003e = signal(0);\n\n\tconstructor(private nui: NuiService) {}\n\n\tngOnInit(): void {\n\t\t// This listens for the \"setCount\" message\n\t\tthis.nui.fromMessageAction\u003cnumber\u003e(\"setCount\").subscribe({\n\t\t\tnext: (value) =\u003e {\n\t\t\t\t// Do whatever logic you want here\n\t\t\t\tthis.count.set(value);\n\t\t\t}\n\t\t});\n\t}\n}\n```\n\n**getLastMessageData**\n\nThis function returns the last data received for a certain action. Useful when a component is rendered after the event has been dispatched but still needs that data (i.e. an application on a phone which gets updated by a loop).\n\n**Usage**\n\n```ts\nexport class MyComponent {\n    constructor(private data: DataService) {\n        let lastData = this.data.getLastMessageData\u003cPlayer\u003e(\"updatePlayer\");\n        if (lastData) {\n            this.player = lastData;\n        }\n    }\n}\n```\n\n**fetchNui**\n\nThis is a simple NUI focused wrapper around the standard `fetch` API. This is the main way to accomplish active NUI data fetching or to trigger NUI callbacks in the game scripts.\n\nWhen using this, you should always at least callback using `{}` in the gamescripts.\n\n_This can be heavily customized to your use case_\n\n**Usage**\n\n```ts\n// First argument is the callback event name.\nthis.nui.fetchNui\u003cReturnData\u003e(\"getClientData\")\n\t.then((retData) =\u003e {\n\t\tconsole.log(\"Got return data from client scripts:\");\n\t\tconsole.dir(retData);\n\t\tsetClientData(retData);\n\t})\n\t.catch((e) =\u003e {\n\t\tconsole.error(\"Setting mock data due to error\", e);\n\t\tsetClientData({ x: 500, y: 300, z: 200 });\n\t});\n```\n\n**dispatchDebugMessage**\n\nThis is a function allowing for mocking dispatched game script actions in a browser environment. It will trigger `fromMessageAction` handlers as if they were dispatched by the game scripts. **It will only fire if the current environment is a regular browser and not CEF**\n\n**Usage**\n\n```ts\n// This will target the fromMessageAction observers registered with `setVisible`\n// and pass them the data of `true`\nthis.nui.dispatchDebugMessages([\n\t{\n\t\taction: \"setVisible\",\n\t\tdata: true\n\t}\n]);\n```\n\n**Misc Utils**\n\nThese are small but useful included utilities.\n\n-   `this.nui.isEnvBrowser()` - Will return a boolean indicating if the current\n    environment is a regular browser. (Useful for logic in development)\n\n## Development Workflow\n\nThis boilerplate was designed with development workflow in mind. It includes some helpful scripts to accomplish that.\n\n**Hot Builds In-Game**\n\nWhen developing in-game, it's best to use `npm run watch`. This is similar to `ng serve`, but it builds the application. Meaning all that is required is a resource restart to update the game script.\n\n**Usage**\n\n```sh\nnpm run watch\n```\n\n**Production Builds**\n\nWhen you are done with development phase for your resource. You must create a production build that is optimized and minimized.\n\nYou can do this by running the following:\n\n```sh\nnpm run build\n```\n\n## Additional Notes\n\nIf you want to contact me or require help you could join my [discord server](https://discord.gg/bEWmBbg), I can't guarantee that I will be able to help you.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3ps4j%2Fcfx-angular-boilerplate-lua","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fr3ps4j%2Fcfx-angular-boilerplate-lua","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fr3ps4j%2Fcfx-angular-boilerplate-lua/lists"}