Learn to Code via Tutorials on Repl.it

← Back to all posts
An introduction to the repl.it editor
h
TheDrone7 (652)

Introduction to the repl.it editor

The repl.it editor is a great tool for writing code but it can be quite difficult to use if you're a self-learner and are directly getting started by using repl.it instead of a setting up a local environment on your PC. In this tutorial, I'm just going to show you what the various sections of the editor do and how you can use them to get best of repl.it. Also, for the sake of examples, we're using the most used language on repl.it for this tutorial (aka Python3).


Names of the various parts

(This is just made up by me for this tutorial, not sure if it's the right names)

  1. The top bar - shows what tab is opened in (3) and shows more options for the opened tab. In the shown screenshot, the Files tab is open and the top bar has options to do the following: -

    • Create a new file
    • Create a new folder
    • Upload files/folder from PC
    • Download the contents of the repl as a zip file.
  2. The tab contents - allows you to use the tab's features. In the currently opened Files tab, it shows a list of all the files and folders in the repl and allows you to choose which file to open in (4).

  3. The tabs - You can switch between the multiple tabs from here. The various tabs and their usage is given below: -

    • Files : Allows you to manage the project files, create/delete new/existing files/folders.

    • Version Control : Allows you to connect your repl to a GitHub repository. You can pull changes from GitHub to your repl or push changes from repl to GitHub.

    • Packages : Allows you to manage which external libraries/packages you want to use in your project. For example, in many python documentations, you may encounter terms such as

      Open up your command prompt and run the following command

      pip install flask

 [repl.it](https://repl.it) makes it easier for you to handle this by just searching for `flask` in the package manager and adding from there by clicking a little "plus" icon.
  • Debugger : A set of professional debugging tools.
  • Settings : Allows you to modify the editor to suit your own coding style such as using a light or dark theme or enabling/disabling code-intelligence.
  1. The editor - This is the main place where you write your code which will be run, a regular text-editor.

  2. The language shell - When you run your code, the console output is displayed here. You can also run single line code snippets here. For example, in some python documentations, you may encounter code samples such as given below: -

    >>> print("Hello World")

    or

    >>> 3 ** 4

    These are just single line code snippets that can be executed directly to test stuff or calculate some results. These can also be run in the language shell.

    Python's official documentation clearly states, python shell can be used as a replacement for calculators and that's what the shell is there for so put it to good use.

You may also encounter sometimes tutorials saying something like: -

Open up the shell and execute the following command: -

py main.py

OR

pip install flask

These shells refer to terminals and are not to be executed in the language shell and will most probably result in errors.

  1. In case you have made a website using repl.it you will also see a 6th division, which would contain a preview for the website.

The package manager

repl.it uses the Universal Package Manager which detects the language and tries to install the required dependencies automatically but sometimes it can't and you need to install them manually. You can tell the package manager to install them in 2 ways: -

  1. Specifying the dependency in the respective packages list. For example: - you can add dependencies to the pyproject.toml in python or package.json in node js.

  2. Using the packages tab in the editor.

    By default it shows the installed packages as shown in the image. You can search for new packages to add in the search bar. And clicking the little "plus" icon beside the package name.

    And the package will be installed in your repl and automatically added to the corresponding packages list.


This is all you would normally need to get started with repl.it's editor. If you think something is missing and should be added, be sure to let me know via comments and thanks for reading it!


Commentshotnewtop
Zavexeon (656)

Listing some shortcuts for the editor would be pretty neat.

TheDrone7 (652)

@Zavexeon repl.it supports 3 different key binds so I couldn't list a few and expect them to work for everyone.

Zavexeon (656)

@TheDrone7 Hmm... I thought there were more than that, but what do I know? I never use them, lol.

Franky1 (1)

Is it possible to have a .env file or similar with e.g. credentials, that cannot be seen by others? Or to set ENV variables in my account that are private?

TheDrone7 (652)

You can simply have a .env file @Franky1 and store keys in it in the following format

key1=value1
key2=value2

Repl.it will automatically read it and create environment variables from it. And it's also hidden from others visiting your repl so they can view your code while but they won't be able to see any hidden keys you keep in the .env file.

Note that you mustn't use quotes or they will be considered a part of the value. For example, if you do

key1="value1"

The value of key1 will be "value1" and not value1.

Franky1 (1)

@TheDrone7 Great! Thanks for the fast reply!

KaiMitchellChri (0)

How do you get a file that's not on UPM?
I am a meganoob.

TheDrone7 (652)

@KaiMitchellChri that's what the upload option is there for.

PDanielY (280)

Very original 😛