Development

This guide explains how to set up a local environment for developing React Clean UI.

Follow the guide directions careful, as this step method will allow you to preview your work using Stories in the UI Labs plugin.

This guide assumes you're already familiar with roblox-ts, Rojo, and Roblox Studio.

1. Create a development project

Create a new roblox-ts project outside of the React Clean UI repository.

mkdir C:\Users\username\Documents\dev-game
cd C:\Users\username\Documents\dev-game

npm init roblox-ts game

When prompted:

Leave Project directory blank.
Answer Y to the remaining questions.

2. Install the required packages

Install the packages required for the development project.

npm install @rbxts/react @rbxts/react-roblox @rbxts/ui-labs @rbxts/services @rbxts/react-ripple

3. Clone React Clean UI

Create a /src/Packages directory and clone the repository into it.

cd src
mkdir Packages
cd Packages

git clone https://github.com/Shadercloud/rbxts-react-clean-ui.git

Your project should now look like this:

dev-game/
├── src/
│   └── Packages/
│       └── rbxts-react-clean-ui/

4. Configure TypeScript

Replace your root project's tsconfig.json with the following:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "downlevelIteration": true,
        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment",
        "module": "commonjs",
        "moduleResolution": "Node",
        "noLib": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "moduleDetection": "force",
        "strict": true,
        "target": "ESNext",
        "typeRoots": [
            "node_modules/@rbxts"
        ],
        "types": [
            "types"
        ],
        "rootDir": "src",
        "outDir": "out",
        "baseUrl": "src",
        "incremental": true,
        "tsBuildInfoFile": "out/tsconfig.tsbuildinfo",
        "paths": {
            "@rbxts/react": [
                "../node_modules/@rbxts/react"
            ],
            "@rbxts/react-roblox": [
                "../node_modules/@rbxts/react-roblox"
            ],
            "@rbxts/ui-labs": [
                "../node_modules/@rbxts/ui-labs"
            ],
            "ripple": [
                "../node_modules/@rbxts/ripple"
            ],
            "react-ripple": [
                "../node_modules/@rbxts/react-ripple"
            ],
            "@rbxts/services": [
                "../node_modules/@rbxts/services"
            ],
            "@rbxts/react-clean-ui": [
                "Packages/rbxts-react-clean-ui"
            ]
        }
    },
    "exclude": [
        "src/Packages/**/src",
        "src/Packages/**/node_modules",
        "src/Packages/**/out",
        "src/Packages/**/.vscode",
        "src/Packages/**/docs"
    ]
}

5. Configure Rojo

You must install Rojo (easier method is by using the Rojo Extension for `VS Studio Code``)

Create a default.project.json file in the root of your development project.

{
	"name": "React Clean UI Dev Environment",
	"globIgnorePaths": [
		"**/package.json",
		"**/tsconfig.json"
	],
	"tree": {
		"$className": "DataModel",
		"ServerScriptService": {
			"$className": "ServerScriptService",
			"TS": {
				"$path": "out/server"
			}
		},
		"ReplicatedStorage": {
			"$className": "ReplicatedStorage",
			"rbxts_include": {
				"$path": "include",
				"node_modules": {
					"$className": "Folder",
					"@rbxts": {
						"$className": "Folder",
						"compiler-types": {
							"$path": "node_modules/@rbxts/compiler-types"
						},
						"react": {
							"$path": "node_modules/@rbxts/react"
						},
						"react-roblox": {
							"$path": "node_modules/@rbxts/react-roblox"
						},
						"services": {
							"$path": "node_modules/@rbxts/services"
						},
						"ui-labs": {
							"$path": "node_modules/@rbxts/ui-labs"
						},
						"ripple": {
							"$path": "node_modules/@rbxts/ripple"
						},
						"react-ripple": {
							"$path": "node_modules/@rbxts/react-ripple"
						},
						"types": {
							"$path": "node_modules/@rbxts/types"
						},
						"rbxts-react-clean-ui": {
							"$path": "out/Packages/rbxts-react-clean-ui/out"
						}
					},
					"@rbxts-js": {
						"$path": "node_modules/@rbxts-js"
					}
				}
			},
			"TS": {
				"$path": "out/shared"
			},
			"PackageStories": {
				"$path": "out/Packages/rbxts-react-clean-ui/Stories"
			}
		},
		"StarterPlayer": {
			"$className": "StarterPlayer",
			"StarterPlayerScripts": {
				"$className": "StarterPlayerScripts",
				"TS": {
					"$path": "out/client"
				}
			}
		},
		"Workspace": {
			"$className": "Workspace",
			"$properties": {
				"FilteringEnabled": true
			}
		},
		"HttpService": {
			"$className": "HttpService",
			"$properties": {
				"HttpEnabled": true
			}
		},
		"SoundService": {
			"$className": "SoundService",
			"$properties": {
				"RespectFilteringEnabled": true
			}
		}
	}
}

6. Start the development environment

You'll need three terminals running simultaneously (start them in the specific order listed below).

Terminal 1 — Compile React Clean UI

cd C:\Users\username\Documents\dev-game\src\Packages\rbxts-react-clean-ui
npm install
npx rbxtsc -w

Terminal 2 — Compile your game

cd C:\Users\username\Documents\dev-game
npx rbxtsc -w

Terminal 3 — Run Rojo

cd C:\Users\username\Documents\dev-game
rojo serve

7. Open Roblox Studio

Open your development place in Roblox Studio and connect it to the running Rojo server.

8. Install UI Labs

Install the UI Labs plugin:

https://ui-labs.luau.page/docs/installation

Once installed, open Plugins → UI Labs. You should see the React Clean UI component stories, allowing you to preview components while you develop.

Development

On this page