Understanding the Replit IDE: a practical guide to building your first project with Replit
This tutorial is also available as a video.
Software developers can get pretty attached to their Integrated Development Environments (IDEs) and if you look for advice on which one to use, you'll find quite a lot of developers advocating strongly for one over another: VS Code, Sublime Text, IntelliJ, Atom, Vim, Emacs, and no shortage of others.
In the end, an IDE is just a glorified text editor. It lets you type text into files and save those files, functionality that has been present in nearly all computers since those controlled by punch cards.
In this lesson, you'll learn how to use the Replit IDE. It has some features you won't find in many other IDEs, namely:
- It's fully online. You can use it from any computer that can connect to the internet and run a web browser, including a phone or tablet.
- It'll fully manage your environment for building and running code: you won't need to mess around with making sure you have the right version of Python or the correct NodeJS libraries.
- You can deploy any code you build to the public in one click: no messing around with servers, or copying code around.
In the first part of this guide, we'll cover the basics and also show you how multiplayer works so that you can code alone or with friends.
Introduction: creating an account and starting a project
Visit https://replit.com/signup and follow the prompts to create a user account, either by entering a username and password or by logging in with Google, GitHub, or Facebook.
Once you're done, hit the
+ new repl button in the top left. In the example below, we choose to create a new Python project. Replit will automatically choose a random name for your project, or you can pick one yourself. Note that by default your repl will be public to anyone on the internet; this is great for sharing and collaboration, but we'll have to be careful to not include passwords or other sensitive information in any of our project files.
You'll also notice an "Import from GitHub" option. Replit allows you to import existing software projects directly from GitHub, but we'll create our own for now. Once your project is created, you'll be taken to a new view with several panes. Let's take a look at what these are.
Understanding the Replit panes
You'll soon see how configurable Replit is and how most things can be moved around to suit your fancy. However, by default, you'll get the following layout.
- Left pane: files and configuration. This, by default, shows all the files that make up your project. Because we chose a Python project, Replit has gone ahead and created a
- Middle pane: code editor. You'll probably spend most of your time using this pane. It's a text editor where you can write code. In the screenshot, we've added two lines of Python code, which we'll run in a bit.
- Right pane: output sandbox. This is where you'll see your code in action. All output that your program produces will appear in this pane, and it also acts as a quick sandbox to run small pieces of code, which we'll look at more later.
- Run button. If you click the big green
runbutton, your code will be executed and the output will appear on the right.
- Menu bar. This lets you control what you see in the main left pane (pane 1). By default, you'll see the files that make up your project but you can use this bar to view other things here too by clicking on the various icons. We'll take a look at these options later.
Don't worry too much about all of the functionality offered right away. For now, we have a simple goal: write some code and run it.
Running code from a file
Usually, you'll enter your code as text in a file, and run it from there. Let's do this now. Enter the following code in the middle pane (pane 2), and hit the run button.
Your script will run and the output it generates will appear on the right pane (pane 3). Our code outputs the phrase "Hello World" (it's a long-standing tradition that when you learn something new the first thing you do is build a 'hello world' project), and then output the answer to the sum
1 + 2.
You probably won't be able to turn this script into the next startup unicorn quite yet, but let's keep going.
Running code from Replit's REPL
In computer programming, a REPL is a read-eval-print loop, and a REPL interface is often the simplest way to run short computer programs (and where Replit got its name).
While in the previous example we saved our code to a file and then executed the file, it's sometimes quicker to execute code directly.
You can type code in the right-hand pane (pane 3) and press the "Enter" key to run it. Take a look at the example below where we print "Hello World" again and do a different sum, without changing our code file.
This is useful for prototyping or checking how things work, but for any serious program you write you'll want to be able to save it, and that means writing the code in a file like in our earlier example.
Adding more files to your software project
If you build larger projects, you'll want to use more than a single file to stay organised, grouping related code in different files.
So far, we've been using the 'main.py' file that was automatically created for us when we started the project, but we're not limited to this file. Let's add a new file, write some code in that, and import it into the main file for use.
As an example, we'll write code to solve quadratic equations. If you've done this before, you'll know it can be tedious without a computer to go through all of the steps.
Let's make Python do the repetitive steps for us by creating a program called "solver". This could eventually have a lot of different solvers, but for now we'll just write one:
Add a new file to your project by clicking on the
new file button, as shown below. Call the file
solver.py. You now have two files in your project:
solver.py. You can switch between your files by clicking on them.
solver.py file and add the following code to it.
def solve_quadratic(a, b, c):
d = (b ** 2) - 4 * a * c
s1 = (-b + math.sqrt(d)) / (2 * a)
s2 = (-b - math.sqrt(d)) / (2 * a)
return s1, s2
Note that this won't solve all quadratic equations as it doesn't handle cases where
d, the discriminant, is 0 or negative. However, it'll do for now.
Navigate back to the
main.py file. Delete all the code we had before and add the following code instead.
from solver import solve_quadratic
answer = solve_quadratic(5, 6, 1)
Note how we use Python's import functionality to import the code from our new solver script into the
main.py file so that we can run it. Python looks for
.py (Python) files automatically, so you omit the
.py suffix when importing code. Here we import the
solve_quadratic function (which we just defined) from the
Run the code and you should see the solution to the equation, as shown below.
Congratulations! You've written your first useful program.
Sharing your application with others
Coding is more fun with friends or as part of a team. If you want to share your code with others, it's as easy as copying the URL and sending it. In this case, the URL is
https://replit.com/@ritza/demoproject, but yours will be different based on your Replit username and the project name you chose.
You can copy the link and open it in an incognito tab (or a different web browser) to see how others would experience your project if you were to share it. By default, they'll be able to see all of your files and code and run your code, but not make any changes. To be able to make changes they would need to fork the repl to create their own copy. Any changes your friends make will only happen in their copies, and won't affect your code at all.
To understand this, compare the two versions of the same repl below.
- As you see it, with all of the controls
- As your friend or an anonymous user would see it without forking the repl, a read-only version
What does this mean? Because no one else can edit your repl, you can share it far and wide. But because anyone can read your repl, you should be careful that you don't share anything private or secret in it.
Sharing write-access: Multiplayer
Of course, sometimes you might want others to have write access to your repl so that they can contribute, or help you out with a problem. In these cases, you can use Replit's "multiplayer" functionality.
If you invite someone to your repl, it's different from sharing the URL with them. You can invite someone by clicking
Invite in the top right and sending them the secret link that starts with
https://replit.com/join. This link will give people edit access to your repl.
If you have a friend handy, send it to them to try it out. If not, you can try out multiplayer anyway using a separate incognito window again. Below is our main Replit account on the left and a second account which opened the multiplayer invite link on the right. As you can see, all keystrokes can be seen by all parties in real time.
Make it your own
If you followed along, you'll already have your own version of the repl to extend. If not, start from ours. Fork it from the embed below.
You can now create basic programs on your own or with friends, and you are familiar with the most important Replit features. There's a lot more to learn though. In the next lessons, you'll work through a series of projects that will teach you more about Replit features and programming concepts along the way.