This tutorial will give you an easy and fast way to get Rojo with Git support up and running. These directions are meant to be easily accessible enough for any users to follow.
Last week I read something about Rojo, it said: “Rojo is designed for power users who want to use the best tools available for building games, libraries, and plugins.”
but…
Why Rojo? Everyone’s been talking about it. Is it for me?
Hint: The answer to this is yes. 
Show: Benefits of Rojo
-
Rojo enables you to use professional-grade software engineering tools (like Visual Studio Code and Git)
– These software engineering tools have hundreds of thousands of hours of work behind them making them great. VSCode has over 1000 contributors on GitHub, many of who committed themselves to squashing every bug in existence
.
– In other words I’ve never had these tools crash on me ever. Roblox Studio crashed on me yesterday after I left it open for too long. -
Using Rojo allows you to work on your code in any code editor:
– This means you can work on your Roblox code without having Studio open.
– You’re able to code in your favorite code editor, no matter what it is. Notepad anyone?
– You can even code on devices without Studio support (Linux, an iPad, your ancient toaster computer that’s in storage) -
Create code even when you have no internet
– External code editors don’t need internet. Which means your Roblox code is editable even when your router gets hit by a lightning bolt
.
– why is there no offline studio support -
Version Control
– Using Rojo and a separate code editor makes it easy to use services like GitHub to manage each version of your game.
– Every version of your game will be accessible to you.
– If you make a critical mistake in your code, you can easily go back in time⏱️. -
No more lost code from crashes/shutdowns
– We’ve all had those days where we coded for hours and didn’t save, and then Roblox Studio randomly crashes. External code editors virtually never crash. Your code is saved even if Studio crashes.
– Have you ever woken up and got right to coding, just to be greeted by your code vanishing before your eyes as Studio is force-closed against your will for an update? No more of that. -
Rojo makes it super easy to work on Teams, since you now have access to version control like Git
– Roblox’s Team Create is occasionally buggy and sometimes crashes. This is more-so the case when your game has like 50,000 parts in it. Using an external code editor means no lag from whatever is in your game’sworkspace.
– Multiple team members can add their changes to your code, and you can easily review their changes and only add the changes you like.
– If a team member accidentally destroys your code, it’s easy to discard their changes. -
Testing code is much easier
– One feature of GitHub is making “branches” of your code. It’s basically a copy of your code that you can edit and test stuff with. If you like the changes, then you can easily add those changes to the main copy of your code. If you don’t like the changes, it’s super easy to discard that branch and it’ll be like your code was never changed. -
Access to hundreds of Extensions in Visual Studio Code that will improve your workflow and make VSCode your own
– Don’t like how Roblox Studio lacks that one niche quality-of-life feature you really want? What if you wanted to make your code editor Gold theme instead of light theme’d? Well there’s pretty much extensions for any option you could possibly want.
– In 2017, there were more than 2,600,000 people using VSCode every month. Statistically a ton of these people have created their own extensions, which means there’s a heck-ton of options to make VSCode feel like your own. -
Knowing Visual Studio Code and Git look good on your resume this one convinced me to finally get Rojo
– Both VSCode and Git are professional-grade tools that are used all across the software industry.
– The skills you learn using these tools are easily transferable to other languages and game development.
– Many tech companies, such as Microsoft, Google, and even Roblox use these tools in their day-to-day programming work. so this up’s your chances of working at Roblox someday
To put it simply, the advantages of using Rojo are too good to pass up. Even I was surprised when I looked at this thread and saw that so many top developers used it for their games (games like Jailbreak and Adopt Me), so it must be super helpful. To quote one of them, “I am very thankful to the great talent creating these super-tools that empower my workflow 10x.”
I highly recommend following this tutorial and finally taking that first step of incorporating Rojo into your workflow. We’ve all been avoiding it thus far, but after this tutorial shows you how easy it is, you’ll jump right on-board!
I’m sure we could all take the harder routes to use Rojo instead of the easy methods listed below, but why do that when we could just get it setup quick and spend that saved time creating and designing our dream game? 
Let’s get started:
Step 1: Get Visual Studio Code and GitHub Desktop
Show directions
First we have to get the main two programs that will power our new workflow. This tutorial will be using GitHub Desktop, which is a small program that makes Git really easy to use. I could use Git in the command line but GitHub Desktop is just so much simpler.
- Install GitHub Desktop
- Install Visual Studio Code (which is occasionally abbreviated to VSCode)
Step 2: Setup GitHub Desktop
Show directions
Our next step is setting up GitHub Desktop. I won’t go into the details here, but I’ll give you the general steps.
- Log into your GitHub on GitHub Desktop
- Create a repository for your game in GitHub Desktop
- Make it so Visual Studio Code is the default editor in GitHub Desktop
- From now on, you will always open your code editor through this button in GitHub Desktop.
Your changes in the code editor will automatically appear in GitHub Desktop and you can discard, or commit and push the changes to GitHub easily through GitHub Desktop.
Step 3: Getting the Rojo VSCode extension
Show directions
Alright, before you jump ship from those scary words, this step is actually much easier than I expected. Thanks to the hard work of @evaera and many others (check the contributors on the extension’s GitHub page), we have a really nice Extension for VSCode that makes Rojo easy.
-
Open VSCode (through that button I showed in the picture above!)
-
Goto the Extensions tab on the bar on the left (this icon)
-
In the search bar, type “Rojo” and select the extension named *“Rojo - Roblox Studio Sync”
-
Install this extension
-
After it’s installed, press Ctrl+Shift+P to bring up the VSCode command panel, type “rojo welcome screen” and click the only option that appears.
-
On the welcome page that pops up, scroll down to here and click “MANAGE IT FOR ME”. Basically you are selecting an option that makes this Rojo extension automatically manage the Rojo plugin for Roblox Studio.
After clicking:
-
Now there should be a Rojo plugin in your Roblox Studio:
-
Streaming/copying your code to Roblox Studio is now as simple as clicking two buttons*.
*note: this will not work yet as we have to setup your game project with Rojo first -
Tip: I recommend reading this welcome page as well. It lists some very helpful Extensions that will make your Rojo workflow more powerful (although I’ll touch up on the Extensions I use in a bit). The Welcome screen also has a link to the Rojo documentation.
Step 4: Setting up your game project
Show directions
This may be the more difficult (and most important) part of the tutorial, although it’s not too bad. You should know though that it can be difficult to migrate an existing Roblox game project into Rojo. I either recommend starting Rojo with a new game, or one that is not too far along. You could migrate your existing project - it will probably require you to change a lot of code references though.
If you are starting a new game, I highly highly recommend using the AeroGameFramework by @sleitnick. As described by him:
“AeroGameFramework is a Roblox game framework that makes development easy and fun. The framework is designed to simplify the communication between modules and seamlessly bridge the gap between the server and client. Never again will you have to touch RemoteFunctions or RemoteEvents.”
Oh boy is he not kidding. There’s a reason that a ton of developers use it and praise it, and it’s even used to power the features in various top games. It essentially takes away the pain of having to worry about the client-to-server (and vice-versa) communication of your game.
AeroGameFramework also comes built-in with a ton of open-source modules that will make your coding life easier. Why “re-invent the wheel” 100 times in your code when you can instead use these pre-made modules to speed up your coding so you can then focus on your game’s design? 
It also comes with a data-saving module called ProfileService which is the data-saving you should be using in the 2020’s.
While the Roblox Studio plugin for AeroGameFramework is no longer supported, thankfully and conveniently, there’s a VSCode Extension for it that is still very much supported.
Here I will first describe how to set up a normal new game project, and if you’re ready to level up your game development, then set up your game project and then move onto my description of how to set up your game project to use AeroGameFramework (which is ironically very very easy to setup).
Step 4 - Part 1: Setting up a standard game project for Rojo:
Show Part 1 directions
Right now your file explorer in VSCode looks like this:
-
To begin, right-click the blank space in your file explorer (so in the picture above, right click somewhere under that .gitattributes text) and press “New Folder”. Name it “src” (which means “source”). Right click your new folder and create 2 more folders inside of it. Name one “ServerScriptService” and name the other “ReplicatedStorage”.
-
Now, right click the “ServerScriptService” folder and press “New File”. Name the new file “
HelloWorldScript.server.lua”. This file will become a standardScriptthat will be in our Roblox game. -
-
Add some code to your new file, such as
print("Hello world from VSCode!")and hit Ctrl+S to save.
-
Your file structure of your file explorer should now look like this:
-
Now that we have some files for our game, we’re going to create a file that tells Rojo what to do. Press Ctrl+Shift+P to bring up the VSCode command panel, type “rojo init” and click the only option that appears.
-
This should create a file called
default.project.jsonin your file explorer. This file determines what files Rojo copies over to Studio and where these files are copied to in Studio. -
Open the file that was just created (
default.project.json). You should see a bunch of scary text and lots of { } brackets. Initially this looks very scary and confusing so I will try to simplify it as much as possible. -
Delete everything in this file. Paste this simplified version that only deals with ServerScriptService:
{
"name": "MY_GAMES_NAME_HERE_THIS_CAN_BE_ANYTHING",
"tree": {
"$className": "DataModel",
"ServerScriptService": {
"$className": "ServerScriptService",
"GameFiles": {
"$className": "Folder",
"$path": "src/ServerScriptService"
}
}
}
}
-
This .json code basically tells Rojo how the explorer in Roblox Studio should look. If a file specified by this .json code does not exist, then Rojo will create that file in Studio. If it does exist, then Rojo will just use the existing file.
-
Let’s break down what each part of this .json code is doing. Trust me, it’s surprisingly simple:
-
Make sure that after pasting the .json code into your
default.project.jsonfile, you press Ctrl+S to save the file. -
Alright, now that we have some files for our game, and we have the file that tells Rojo what to copy and where to copy it, let’s start Rojo and see this magic happen!
-
Open a new blank baseplate place in Roblox Studio. Then follow this picture:
Troubleshooting:
Show troubleshooting pictures
-
If Step 1 of this picture worked correctly, then you should get this popup on the bottom right of VSCode:
– If Step 1 isn’t working, then check the Output of VSCode to see what went wrong. -
If Step 2 of this picture worked correctly, then the plugin should look like this:
– If Step 2 isn’t working, then check the Roblox Studio output to see what went wrong. It’s likely that Rojo was not running in VSCode first, BEFORE you pressed Connect in Studio.
If Rojo connected correctly, then check your explorer in Roblox Studio! Your “GameFiles” folder that you specified in the default.project.json file should be in ServerScriptService, and all your files inside of your src/ServerScriptService directory should have appeared in that GameFiles folder.
our code is here!
…and that’s the magic of Rojo! While you code, you can leave Rojo connected, and whenever you save your file in VSCode, it will automatically and instantaneously be copied into Roblox Studio (overriding the non-updated scripts).
You can also edit your default.project.json file to stream other files as well (like from that src/ReplicatedStorage folder we created earlier)! Just so you know, the src folder, ServerScriptService folder, or any other folder you have in VSCode could actually be named whatever you want it to be. You just have to specific the path to that folder in your default.project.json file.
Important:
You might be wondering if you can leave out the GameFiles folder, or whatever you named it.
Don’t try to remove it.
You can configure the default.project.json file to remove it, but the reason I don’t is because when you stream your VSCode files directly into ServerScriptService (or any other service), any other instances that are in there, that are not your VSCode files, will be deleted.
- Some people make this mistake and then complain that Rojo bugged and deleted their all their stuff in Studio. Rojo did not bug in those situations, it just followed what those user’s
default.project.jsonfile said to do.
(Optional) Step 4 - Part 2: Setting up your game project to use AeroGameFramework:
Show Part 2 directions
Before you follow these directions, I recommend following the directions of Setting up a standard game project for Rojo at least once so you have a better understanding of what’s going on. I won’t explain how to use AeroGameFramework in this section, although I will tell you quickly how to install it.
-
Start a new project in Visual Studio Code. You can do this by deleting all the files from the previous directions (except for .gitattributes, don’t delete that) or you can start a new project by creating a new repository in GitHub Desktop. Your file explorer in VSCode should look like this:
-
Goto the Extensions tab on the left in VSCode and search “aerogameframework”. Click the only option that appears and install it.
-
Follow the description of the Extension to learn how to use it. I’ll tell you the most important step though. Press Ctrl+Shift+P to bring up the VSCode command panel, and type “aerogameframework: init”, and click the only option that appears.
-
This will automatically setup AeroGameFramework in your project. It will create a
srcfile for you so you don’t have to. It will also create adefault.project.jsonfile that is already configured to stream the AGF files into Roblox Studio when you start Rojo. -
Your file explorer in VSCode should now look like this:
except for the “selene.toml” file - that’s from one of my extensions -
You might also have noticed that the AeroGameFramework extension added a button on the left-side toolbar:
-
This button opens a new explorer page where you can create new scripts in AeroGameFramework. It makes managing scripts and server-to-client communication very easy, and even becomes fun to use once you get a hang of it. The AGF explorer page looks like this:
-
Scripts that do stuff on the Server will go under
Services. LocalScripts that do stuff on the Client will go underControllers. In theModulesfolders and theSharedfolders, there are a bunch of useful open-source modules. You can also add your own modules to these folders!
except for the “selene.toml” file - that’s from one of my extensions
Warning about when you add your own modules to the “Modules” and “Shared” folders:
Show warning
When you add a third-party module in AeroGameFramework, you have to create a Settings file that tells AeroGameFramework that it’s a third-party module (this is easily done with the AGF extension).
- If you don’t do this, then AeroGameFramework might error when trying to process your third-party module.
For help using AeroGameFramework, I suggest reading the description on the AeroGameFramework extension page, following the official video tutorials for AeroGameFramework and also read up on the official documentation.
Step 5: Publishing your code changes to GitHub
Show directions
The awesome thing about opening Visual Studio Code through GitHub Desktop is that any changes you make in Visual Studio Code are automatically seen by GitHub Desktop.
-
Once you’re satisfied with your code changes, add a brief statement that describes your code changes here:
-
Press “Commit to main”. After pressing that, GitHub Desktop knows that you like these changes, and that you’re ready to send them to the GitHub servers.
-
Time to send it! Press “Push origin” to send your changes to the GitHub servers. What this means is that you’re “pushing” your changes to GitHub. Think of it as pushing your changes to their direction.
-
Your changes should now be stored in GitHub, and are considered their own version! You can check out this version at any time in GitHub, such as in cases where you did some irreversible decision with your code.
-
That’s all there is to it! Just remember to open up your project through GitHub Desktop, by pressing that “Open in Visual Studio Code” button. Any changes you make will automatically appear in GitHub Desktop (as long as you’ve already pressed Ctrl+S to save the file you’re working on). You can also change your active game project by pressing “Current repository: My-New-Game” that you can see in the top-left of the picture above.
Step 6: Other extensions to install to make VSCode recognize Roblox Lua code
Show directions
If you got this far, congratulations! You’re on the last step and it’s clear you’re ready to leverage the power of Rojo. There’s just a couple more things you need to install though, and you’ll be right back to creating your dream game.
At the moment, your Visual Studio Code editor does not recognize Roblox Lua code and Roblox Lua syntax. We need to change that.
Search for these extensions (the names that are in bold) in VSCode and install them:
-
Roblox LSP - by @Nightrains
– “Roblox LSP provides a lot of features, like advanced IntelliSense, Signature Help, Goto Definition, Symbols, Diagnostics, etc, and many focused on programming in Roblox and Luau.”
– (DevForum page)
-
Selene - by @Kampfkarren
– “a command line tool designed to help write correct and idiomatic Lua code.”
i.e. it’s a “linter” that warns you if you’re doing something really bad in your code, like dividing by 0.
– (Documentation page)
-
Roblox Lua Autocompletes - by @Kampfkarren
– “A Visual Studio Code extension to auto fill Roblox patterns.”
– (GitHub page)
-
Roblox API Explorer - by @evaera
– “Allows you to explore the Roblox API right from your IDE”
– Press Ctrl+Shift+P at any time in VSCode and type “Open Roblox API Explorer”.
– (GitHub page)
There are also some other extensions that I personally recommend, that will heavily improve your workflow. Roblox Studio has some quality of life features, like auto-indenting, and we want those in our external code editor too.
-
GitLens – Git supercharged
– When a line is selected, this extension tells you when a change was made, and the commit statement for that change:
-
Visual Studio IntelliCode (by Microsoft)
– Uses AI to support your code writing. Remembers what you previously typed and when so it can assist you with auto-fills when you encounter similar situations again. -
Prettier - Code formatter
– Automatically formats your code like Roblox Studio. Very helpful if you’re pasting stuff! -
lua-indent
– Automatically indents your code. -
Indenticator
– “Highlights your current indent depth” -
Color Highlight
– Puts a colored box around color values in your code, that are the same color as the value.
This concludes the tutorial of how to easily setup Rojo, and also set it up with Git support. I hope the tutorial didn’t seem too long, and it’s only as long as it is so that I could give you all the important details I believe you needed to know. When I initially become interested in Rojo, it took me months to push myself to take the first step, and even then, I had to tirelessly look to so many different places to figure out all the info I needed. Hopefully I didn’t miss any steps or details!
Overall, I really really recommend developing with Rojo, Git, and Visual Studio Code. It will feel very unfamiliar at first, and it did for me, but you’ll get over that the more you use it. I hope this helps you become a more powerful developer, and I guarantee you’ll be writing higher quality and more organized code in no time. Feel free to ask any questions you have by replying here or by sending me a direct message.
