Advanced roblox project setup with Argon plugin!

AridTheDev · November 25, 2022, 4:00pm

Table of Contents	Requirements
Introduction	Roblox Studio
Setting up (Part - 1)	GitHub
Setting up (Part - 2)	Visual Studio Code
Creating a local Repository	GitHub Desktop
Dealing with Argon	Git
Creating a Repository	Argon (Roblox plugin)
Reverting back	Argon (VSCode Extension)
Outro	—

Introduction

Hi there! I’m Arid, and this is my first tutorial! This is a tutorial on how you can setup an advanced roblox project with the Argon plugin! I’m going to try my best to make you all understand, but if it’s still hard, do not hesitate to ask questions! That’s all for the introduction, and let’s get started!

Setting up (Part - 1)

Alright, first of all, you need a GitHub account. If you don’t have a GitHub account, then go ahead create one using your email address (everything there is self-explanatory).
Next up, go ahead and download GitHub Desktop and as usual sign into it.
I’m just going to skip the part for Roblox Studio, but if you need help, make sure to ask so!
And for the final one and the most needed one, download Visual Studio Code and set it up as any other executable files.
Now, we need Git. Go ahead and download it according to your PC specifications. One thing I’d like to add here, is when downloading there should be a menu where it’d ask the default coding software and “Vim” should be selected. Change this to Visual Studio Code.
Now for the main reason of this tutorial, Argon. Go ahead and download both the roblox plugin and Visual Studio Code extension of Argon. DOWNLOAD THE VISUAL STUDIO CODE EXTENSION AFTER YOU HAVE DOWNLOADED VISUAL STUDIO CODE.

Setting up (Part - 2)

Open up GitHub Desktop and you should see this screen:

"Wait! It didn’t show me this screen?!"

It didn’t? No worries! If it doesn’t show a few options on the screen, then go up to File → Options or click Ctrl + , for Windows or Cmd + , for mac (I’m not sure about the mac keybinds, please correct me if I’m wrong). Then over there, you should see this screen:

Go ahead and sign in to GitHub.com.

"Yahoo! I’m doing it!"

Good job! Now, let’s go ahead to VSCode (Visual Studio Code, you may see me using only VSCode over the topic so this is the only side-note you’re getting )

When you open VSCode, you should see this screen:

"Woah! Why’s your screen so much different than mine??"

No need to worry bud! I’m using a custom team made by an awesome guy named “Philipp Kief”! Here’s his extension, you can make your software cool like mine or even cooler by using other’s themes! Okay, uhh… that’s a lot of talking. Back to the tutorial-

Anyways, your screen is similar to mine! What you’re first going to do is click on the profile icon on your bottom left on the activity bar!

Nice! Click on it and you should have an option called “Turn on Settings Sync”. On the top-center of the screen, you should see a pop-up with quite some stuff. You just need to click on “Sign in & Turn on”. You should see another pop-up and this type it’s wanting you to sign in! Click on “Sign in with GitHub”. And you should see that you’re now logged in! Great!

"Hold up! I don’t see anything like “Turn on Settings Sync” when I click the profile icon! Are you trying to scam us?!?!"

Haha, not at all! For some reason, it shows this option for me but you should understand how to log in when you click on the profile icon. If you still can’t then…

Google exists for a reason…

Anyways, now you’re signed in everywhere! Great!

Creating a local repository

All’s going great! Let’s create our first repository! But first of…

What is a Git repository?

Okay, we’re going advanced but let’s try to keep it simple, alright? So, think of a folder on your desktop. You store your files in a folder, but sometimes accidentally delete an important file. So, you right-click in an empty space and click on “Undo Delete” or you just use the simple keyboard shortcut Ctrl + Z for Windows and Cmd + Z for mac, right? A repository works somewhat like that, except more advanced! You store your files in a repository but here it’s stored using a version hash! So, you can revert to it anytime even after you do something stupid (for which I’ll give myself as the biggest example). You can not only revert back to a previous version and also not only redo too, but also work on a single project as a team!

"You’re kidding… right?"

No! I’m not! It’s all true! You can do that very very and I mean very simply. Now that you’ve got the basic idea of a Git repository, let’s actually create one!

Actually creating a repository this time

First, open up GitHub Desktop and create a new repository by clicking on “Create a New Repository on your hard drive…”.

Or, you could go up to “File” → “New Repository” or click Ctrl + N for windows and Cmd + N for mac.

You should now see this pop-up:

It’s all very simple, let’s go ahead and set it up! Everything’s optional, doesn’t matter if you leave it like that, except for the Name. Names should be unique and shouldn’t be the exact name as other repositories. You can use _ or - in the name, but other symbols and spaces won’t work and they would change into -! You can set the local path for the local repository you’re going to create right now or leave it like that. You should already be able to create it! Click on “Create repository”.

I’ve named my repository “Tutorial-Repo” because why not! You’re now over here!

There are some things you might not understand, but we’re not going to look at so many things. We’ll look at the things we need. I’ve highlighted the things in red in the above picture so you know which things we actually need!

Now, we’re heating up with this tutorial! Now that you know what you need and what things you should be looking at, let’s get more advanced in a simple way!

At the center of the screen, you’ll see an option where it says “Open in Visual Studio Code”. Let’s just follow what it says! Click it and WOAH! It redirected us to VSCode! That’s amazing, we didn’t need to open the folder manually, we opened it from here just by 1 click! Open up the explorer (the file icon on the very top of the activity bar).
The one at the very top.

It will open the explorer and you’ll see a file named .gitattributes. You don’t need to mess with it. Yes, it’s none of our business.

Dealing with Argon

Now we will start by running Argon. How do we do that? Easy! Open the Command Palette by going to “View” → “Command Palette” or by pressing Ctrl + Shift + P for windows or Cmd + Shift + P for mac. You should have a pop-up with quite some options. We don’t wanna look at all that. We’re here looking for the options for Argon! When you search up “Argon”, there will appear 3 options.

Here, click on “Argon: Run Argon”. Now, it should run the extension and give you an “src” folder and a .argon.json file.

"Wait! That happened way before you told me too?!"

This is due a setting in the Argon extension which runs automatically. If you want to disable this option, go over to settings, “File” → “Preferences” → “Settings” or by pressing Ctrl + , for windows or Cmd + , for mac. Now, in the search bar, search up “Argon” and there should be a few options:

Disable the “Auto Run” if you don’t want it to run automatically and you could also disable the “Auto Update” if you don’t want the extension to update every time you run it.

Now, if you do not have the .argon.json file, go ahead and open the command palette, search up “Argon” and this time click on “Argon: Update class database”. This time, it should provide you with the file!

Dang, I’m tired! But wait, I know you’re more tired than me since you have read up-to this! Why not finish the rest of the tutorial? Still tired? I’ve got you! At the very top of this post, I’ve made a list just for your ease! You can take off anytime by clicking on the link of where you last landed!

Alright, we’re getting near the end, let’s wrap up this sandwich! Now, since you’ve connected to Argon from VSCode, let’s also connect from Roblox Studio!

Go to the plugins tab at the top and select Argon. You should see this:

Go ahead, click “Connect”.

"Wow, that’s amazing! It connected to VSCode!"

Yes! It’ll only work when you’re running the extension from VSCode. If you try to connect it while it’s not running from VSCode, it will not work and show an HTTP error.

Now, we’ve connected to localhost:8000, the default port number for Argon. You can now define the services name like “ReplicatedStorage” or “ServerScriptService” or any other services by creating a folder under the “src” folder! Then, if you create a Folder under the services, it’ll do so as well! If you name the folder in such a way that ends with .Property, so for example Test.RemoteEvent, it’ll create a RemoteEvent! That’s all I can explain in this tutorial for Argon. For more, visit the actual Argon DevForum post.

Creating a Repository

We’re almost at the end of the tutorial! We need to be quick when we’re wrapping up the burgers and sandwiches! Quick, let’s finish it up!

Now you have some files in your “src” folder. Here’s mine for the tutorial:

Now, you might see that some of our files are highlighted in green. It means that your code has been changed. To fix it up, we have to head over to “Source Control” on the Activity Bar.

The one with the notification.

Here, you see this:

Bruh, why’re things so hard these days… It’s alright! Here, it is basically saying:

"Hey there dude! I was tracking all of your files until you added, removed or modified some! Can you make sure to track it for me, as I really need help!"

So, now we need to track it for the “Source Control”! When you hover over “Changes”, you’ll see a + icon. Click on it, and the changes will be “staged”, or in other words, tracked!

"Woah! Now all my files just went inside the “Staged Changes” category!

That means everything’s perfect!

Now, let’s commit these changes! Here are 4 ways you can commit the changes.

Clicking on the big green button in-front of you.
Clicking on the icon just above the “Commit” button.
Clicking on the … button and going to “Commit” → “Commit” (very long way)
Going to GitHub desktop and clicking on "Commit to main"

When you do this, you’ll notice that you can’t actually commit the changes. To commit the changes, you need to provide a summary or a message. We’ll do that right now!

This message can be anything! Now, if you click “Commit”, then WALA! All your files are gone and there’s an option saying “Publish Branch”. Hold on…

What is a branch?

So, basically a branch is like a folder inside another folder. You can work on it however you want. Multiple branches are most of the time required when you’re working with a team and you don’t want everybody working on the same code. So, for example, you create some new features, your partner fixes bugs, another guy is making just a commented code for ideas and bla bla bla! That’s all there is to branches! By default, you have a branch named “main”.

Alright, we’re out of a few problematic stuff. You can now publish the branch to an ACTUAL REPOSITORY by clicking on the “Publish Repository” in VSCode or by clicking on the “Publish Repository” in GitHub Desktop.

Once you click any one of them, it is going to give you an option for setting the name, description and a checkbox for “Keep this code private”. Now, click “Publish Repository”! It may take a few seconds to create one but you should be done in no time! There we go! Now…

How do I check if I published the repository?

Easy as pie! Go to the GitHub website and go to “Your Repositories” by

PAUSE THE TUTORIAL!!!
Let me show you guys something cool! On GitHub you can go to your repositories page even faster! Press Ctrl + K for windows and Cmd + K for mac. Now, in the search bar if it has your GitHub account username on it then just search up “Repositories” but if not, first type @ and then go over to your profile using arrow keys. And, once you’re on it, press the right arrow on your keyboard and now search up “Repositories”. There you go, you’re now here faster than ever!

CONTINUE THE TUTORIAL!!
Sorry for interuption but let’s continue the tutorial! Here on the Repositories page, you should now see the repository you created, great! If you click on it, you’ll see all the files you have! Amazing!

What if you had to change something? Go ahead stage your changed files, commit them and now sync those changes by clicking on the “Sync changes” button! You’re a professional at this, my guy! You can now reload your page and see the changes already!

Reverting back

The final point of this tutorial! This took me all day to make this tutorial but now I can finally rest!

What will you do if you accidentally make a mistake where you deleted the most important file of you game? Not to worry you can revert back anytime!

Head over to GitHub Desktop, and switch to “History” tab.

Here, you’ll see all the changes you’ve made.

"Sorry for stopping you in the middle of the tutorial, but I just found the commit I want to revert to! Can you stop talking and come to the point already?!?!"

Sure thing! Right-click on the commit that you want to revert to and click on “Revert changes in commit”. Now you have reverted everything! You can now click on “Push origin” at the very top:

And it’ll sync the changes over to GitHub!

Outro

Finally. You’ve worked so hard and now you’ve finished this tutorial! I can’t believe what a great professional developer you are! I’ll help you even more once I get more time! I’ll add another section for the team management in a future tutorial but for now have it simple! I’ll be busy for the next few days, but there are developers who know more than me! Also, huge credits to @Dervex for making a plugin like this and I’d probably recommend you to use this over Rojo for simple projects but since this plugin does not have properties system implemented, I’d still recommend Rojo if you’re okay with it. That’s all for my first tutorial. Here’s a poll on how much you like it or not:

Top tier
Great
Good
Ok
Bad
Worse
Terrible
Absolutely useless

0 voters

I’ll be waiting to hear more from you! A developer of the Roblox community,

Arid

SensoSeniate · November 26, 2022, 1:58pm

Hey there! Thank you for the wonderful tutorial! I had a couple of questions if you don’t mind answering.

So, I’m extremely new to the concept of using external code editors and this was my first real experience trying to set one up and I came across 2 problems/concerns.

1: None of the files were added when I ran argon. The source and .json file wasn’t added, and I’m not sure why.

2: How do I actually add scripts and services and whatnot to VScode and edit it from there?

Once again thank you for the tutorial.

AridTheDev · November 26, 2022, 2:09pm

Hello! Thank you so much for your positive feedback!

According to the Argon v0.3.2, it will default your settings to have the ability to create the root folder and .argon.json file to be disabled. What you’re going to do is go to the settings…

"File" → “Preferences” → "Settings"
or
Ctrl + , for windows
or
Cmd + , for mac

Then, search up Argon and you should see these options:

Here, you may enable the “Auto Create Folder” which will create a root folder whenever you use the command in the Command Palette which says, “Argon: Run Argon”. You can create the root folder normally either way.

Next, for the .argon.json file, it is up-to you whether you want to update the database when you run Argon each time. If so, you’ll click on the “Auto Update” option.

Inside of your root folder, you’ll define your services by their ClassName(s). So for example, if you want to define ServerScriptService, you’ll create a folder named “ServerScriptService” inside of the root folder. And here’s the file formatting for the plugin:

Name.server.lua   → Server script named "Name"
Name.client.lua    → Client script named "Name"
Name.lua              → Module script named "Name"
Name.ClassName → An instance will get created with the ClassName you have defined so for example, Name.RemoteEvent will create a RemoteEvent named "Name"
.source.__             → This type of file should only be created when you are inserting instance(s) into a script.
    If the script you will be inserting object(s) into is a server script, the name will be .source.server.lua
    If the script you will be inserting object(s) into is a client script, the name will be .source.client.lua
    If the script you will be inserting object(s) into is a module script, the name will be .source.lua

If you’re having more problems make sure to ask, I’ll be happy to help!

At the moment, you cannot modify properties of instances, but it will soon be a feature in v0.5.0 according to what Dervex said in the update of v0.3.2 and v0.3.3

AridTheDev · December 21, 2022, 6:05am

An update on this post: I’ll update this post with full tutorial on Argon and the advanced way after v1.0.0 comes out. That’s all.

More info: The upcoming updates will be supporting Rojo files, meaning default.project.json and also maybe we won’t need the .argon.json file anymore.