Roblox-ts
Step-by-step setup guide for roblox-ts projects.
Rogen integrates smoothly with roblox-ts. Rogen reads the uncompiled src folder to decide where each file goes, swaps .ts for .luau in the paths it emits, and points Rojo at the compiled output. rbxtsc and rojo serve both find the one generated project file.
Create the Config
Run the initialization command in the project root. init detects roblox-ts from tsconfig.json:
rogen initCreated template.project.json.
Created default.rogen.json.
Next steps
rbxtsc -w
rogen watch
rojo serve default.project.json
Add your own routes under "routes" in default.rogen.json.
Add tags under "tags" in default.rogen.json to swap in variants like Analytics.mock.ts.{
"$schema": "https://ldgerrits.github.io/rogen/schema/2/rogen.json",
"rootDirs": ["src"],
"routes": {
"server": "ServerScriptService",
"client": "StarterPlayer/StarterPlayerScripts",
"shared": "ReplicatedStorage/shared",
"*": "ReplicatedStorage/shared"
},
"template": "template.project.json",
"syncDir": "out"
}The syncDir is the outDir from tsconfig.json, or out when that isn't set. The template mounts include and node_modules/@rbxts, the way roblox-ts projects expect.
Lay Out a Feature
roblox-ts projects name routing folders in lower case:
src/Inventory/server/InventoryService.ts
src/Inventory/client/InventoryController.ts
src/Inventory/shared/InventoryTypes.tsRogen sends them to ServerScriptService/Inventory, StarterPlayer/StarterPlayerScripts/Inventory and ReplicatedStorage/shared/Inventory, pointing at out/Inventory/….
Run the Pipeline
Run the rbxtsc compiler and Rogen simultaneously. Install concurrently to manage both processes:
npm install -D concurrentlyUpdate the package.json script to run both watchers:
"scripts": {
"watch": "concurrently \"rogen watch\" \"rbxtsc -w\""
}Run the script, and start Rojo in a separate terminal:
npm run watch
rojo serveEmitted paths are optional, so the project file works on a clean checkout before rbxtsc has written out.