This Roblox TypeScript (TS) template integrates popular frameworks and utilities such as Flamework, ProfileService, Cmdr, React, Reflex, TestEZ, UI Labs, and more.
The goal of this project is to be able to quickly launch into creating your next project, without having to set the same things up again. I also intend on new Roblox TS users to be able to use and learn from this project as well, by being able to see how common systems are implemented.
To set up and start using this template, use these three commands in a terminal located in the same directory as this repository:
npm i- Installs all dependencies.npm run build- Builds the project.npm run watch- Initiates the watch mode for continuous development.
Startup Rojo and you should be able to sync to Studio easily!
TIP: If you've followed those steps, but receive an error in the terminal similar to compilerOptions.jsxFactory must be Roact.createElement! then follow these shorts steps here.
- Player data system using ProfileService.
- State is managed and synced from the Server to the Client using Reflex.
- Simple Currency labels UI, more complex Settings UI, & Holder UI have been created using React and hooked into the state using Reflex.
- Cmdr terminal access via F2 key.
- Utilize the GiveCurrency command from Cmdr to adjust a player's currency amount.
Download and use the TestEZ Companion Visual Studio Code plugin to run your tests without even starting your game!
I found myself constantly struggling with using ESLint & Prettier for linting. Until I discovered the Prettier ESLint Visual Studio Code plugin. You should still have the ESLint plugin installed, but you only need to have the Prettier ESLint plugin enabled.
This isn't required, but solved my linting issues.
You can use the UI Labs Studio plugin to easily visualize and test your React UIs without even starting up your game!
Take advantage of rbxts-transform-debug to enhance your debugging experience! Use $print(string) for a neatly displayed output.
Example:
[src/shared/module.ts:8] 10 > 20 = false
[src/shared/module.ts:9] x = 42
[src/shared/module.ts:2] `Hello from ${name}!` = Hello from Vorlias!
[src/shared/module.ts:10] Hello from Vorlias!
This is taken directly from the Roblox TS website because I think it's worth knowing about. What if you wanted to access something you're currently storing inside of the Workspace service in Studio? Well, Roblox TS would have no clue of that thing existing inside of there. Luckily, you can solve this issue extremely easily.
It simply requires the io-serve package and the rbxts-object-to-tree Roblox Studio plugin.
You can find the full guide here.