How to Create a Backend for your Snap! Project Using Replit

How To Create A Repl Server For Snap! Of Your Own!

Warning
As of 2024: Replit is changing their services so that you can only have 3 repls on your account. I no longer recommend using Replit as over the years the platform has gotten worse and worse and you would probably be better off hosting it somewhere else.

Yet Another Warning
As of 2023: Replit is no longer allowing users to create an "Always On" Repl using UpTimeRobot. You must have the Replit editor open for the Repl to stay on.

You can still make your own server by installing Python on your PC:

Windows:

Debian/Ubuntu-related systems:
Run sudo apt install python3 in the terminal.

When installing make sure adding Python to PATH (Windows) is selected.
To get Flask, open Terminal/Command Prompt and type pip install flask.

If you are using a local installation of Python to host your cloud server, create a file on your hard drive with the extension .py and edit it with your favorite code editor. Ignore anything related to Replit and UpTimeRobot. I recommend installing Visual Studio Code (Windows) to edit your program.

When your program is running, your web server will be running on localhost, as well as on your home network (if connected to one). You must use this version of Snap! to access it: Snap! Build Your Own Blocks

The URL for your server will be localhost:8080, or 192.168.x.x. x depends on what private IP address your router assigned your PC. Both URLs are printed in the console. You can also port forward and have your server accessible to all of the internet, but your firewall must be disabled. You may also purchase a domain and link it to your server.

WARNING: Flask is not meant for commercial use, and will crash if too many requests are made.


Introduction


Do you want to create your server to transfer data to Snap!? You have come to the right place! Making a Repl server to transfer data can be useful for Snap!. Using this tutorial, you can make a cloud variable server or transfer data for a game such as an account, Today you will learn about how to use Flask with Python, and connect your Python project to Snap!! Flask is a module that you can use in the text-based coding language Python.


Creating The Repl


I will be using replit.com for this project. A repl in this context is a project in Replit that is saved to the Replit cloud. Once you are logged into your Replit account, open the sidebar, and click theCreate_Repl Button. You should then see something like this:

Make sure you have the template set to Python, name the title whatever you want, and select the owner. Then click the "+ Create Repl" Button.


Coding Flask


Once you have created the Repl, you should find yourself in the coding editor. Time to set up Flask!
First, we import flask:

from Flask import Flask

Then set a variable called "app":

app = Flask('app')

Your code should look something like this now:

from flask import Flask
app = Flask('app')

Now start the server with this code:

app.run(host='0.0.0.0', port=8080)

This will open a port and host a server with an IP. This IP Address will vary depending on where you live.
Now your code should look something like this:

from flask import Flask
app = Flask('app')



app.run(host='0.0.0.0', port=8080)

Great! Now the code to start the server has been written! Don't run the Repl yet though.


Creating Commands


Right now, the Repl is built so that can open a port and start a server. But it can't send any commands yet! So, this is how to create a URL path for our server:

@app.route('/')

This one slash represents this URL:

https://Your-Repl-Name.Your_Username.repl.co

and if using @app.route('/hello'), it will represent THIS URL:

https://Your-Repl-Name.Your_Username.repl.co/hello

Get it? So your code should look like this right now:

from flask import Flask
app = Flask('app')

@app.route('/')

app.run(host='0.0.0.0', port=8080)

Now since the URL does not have any inputs in the URL, the code doesn't have to define anything. So use this:

def Whatever_you_want():

That Whatever_you_want part can be anything. Just make sure not to use it again on another command. This is now this is the code:

from flask import Flask
app = Flask('app')

@app.route('/')
def Whatever_you_want():

app.run(host='0.0.0.0', port=8080)

On the next line, run whatever code you want. But for this tutorial, the code will just return a string. Whenever Snap! sends a command to the server, the server needs to return something to get a response! So to do that, just use this:

return 'Hello, World!'

That Hello, World! part can be anything. Just make sure to add 2 spaces before the return part! Your code should look like this now:

from flask import Flask
app = Flask('app')

@app.route('/')
def Whatever_you_want():
  return 'Hello, World!'

app.run(host='0.0.0.0', port=8080)

Finally! The repl is ready to be run. Click the Run_Button button. It should become "☐ Stop". If you look at the console, the program is installing Flask. This will take a few moments. After that, you should see a web view appear. Congratulations! You have created a command for your web server!

Making URL Inputs For Your Server

It is time to create URL inputs for the server! Again, use @app.route(''), but this time it will be a little different. This time use this:

@app.route('/return/<input>')

That return and input part can be whatever. Just make sure the input has < and > around it!
Your code should look like this now:

from flask import Flask
app = Flask('app')

@app.route('/')
def Whatever_you_want():
  return 'Hello, World!'

@app.route('/return/<input>')

app.run(host='0.0.0.0', port=8080)

Now, the code needs to define some variables. For def Whatever_you_want():, Code this instead:

def Whatever_you_want(input):

If there are multiple inputs, code them in and put them in order from first to last:

def Whatever_you_want(input1, input2):

The code should look like this:

from flask import Flask
app = Flask('app')

@app.route('/')
def Whatever_you_want():
  return 'Hello, World!'

@app.route('/return/<input>')
def Whatever_you_want2(input):

app.run(host='0.0.0.0', port=8080)

Now it needs to return that input! Since "input" is a variable, don't use 's. So do this instead:

@app.route('/return/<input>')
def Whatever_you_want2(input):
  return input

Your code should look like this:

from flask import Flask
app = Flask('app')

@app.route('/')
def Whatever_you_want():
  return 'Hello, World!'

@app.route('/return/<input>')
def Whatever_you_want2(input):
  return input

app.run(host='0.0.0.0', port=8080)

Now it is time to test this. Stop the Repl, and restart it. Next, copy and paste your server URL.
You should see the URL here:
Copy_And_Paste_URL
Next, open a new tab and paste the URL. Then add /return/whatever you want goes here to the URL. It will return whatever you want goes here! Congratulations! You know the basics of creating and coding servers!


Keep Your Server Up 24/7


Go to https://uptimerobot.com/. Log in to your account, and go to your dashboard. Press "Create New Monitor". Set the monitor type to HTTP(s). Set the friendly name to whatever you want. Set the URL to the server URL you used earlier, and set the Monitoring Interval to 5 Minutes. Leave the monitor timeout as it is. You should have something like this:

Click "Create Monitor". Congratulations! Your server will now run 24/7! Now, how will this keep your server up? UpTimeRobot will ping your Repl every five minutes, keeping it from falling asleep.


Making Snap! Blocks To Talk To Your Server


Go to Snap! Build Your Own Blocks. You should be presented with Snap!. Time to make a block for the return input part of your server! Go to the operators category and click the image Button. Make a block like this:
image

Then press OK. Next, click on INPUT and make it a text input:
Make_INPUT_A_Text_Input

Then press "Apply". Now drag a URL block into the REPORT block. Your code should look like this:

URL_In_Report

Now drag a JOIN block into the URL block. Now you need to use a CORS proxy to connect to the server. You can use any CORS Proxy. But I will use Allorigins. So, in the join block, type https://api.allorigins.win/raw?url=https://example.com/ in the first slot. Change "example.com" to the server URL you used earlier. Mine looks like this: https://api.allorigins.win/raw?url=https://Snap-Server-Tutorial.joecooldoo.repl.co. Then in the second slot, type /return/ or whatever you used in the @app.route() part earlier. Then click Add Input on the join block. It looks like an arrow pointing to the right. For the third slot, drag the INPUT variable into it. Your code should look something like this now:

Now press "OK". To test it, drag your new block onto the coding area. Type whatever text you want in it, and run it! It should return what you typed.


Congratulations! You have created your own Snap! Server! Thank you SO much for reading my tutorial! I can't wait to see what you guys make!

Don't you mean "how to make a repl server?"

Yes. Let me fix it.
EDIT: Fixed.

I don't think I've ever seen an inline (i.e., within a paragraph) animated GIF before! That's very nice.

Okay, now I'm going to tear your tutorial apart, so please understand that that's a sign of respect; if I thought you were hopeless I'd just ignore it...

First of all, I see that while I was reading this you changed the title, which is good; all the way through I was thinking "huh? How is this a Snap! server?" And creating a Snap! server (more precisely, a Snap! Cloud server) is something schools want to do a lot, so they don't have to send us student info. So that would be a really useful tutorial!

But now that you've changed it, I still have no idea (really, I'm not just pretending to be a newbie) what it is that you are creating or why. Part of the problem is the use of "repl," which is both the name of a company and a technical term (for Read-Eval-Print Loop). Since you are using replit, I start out not knowing if it's actually a REPL you're building -- or what that would mean, for a visual language.

So the first thing in your tutorial should be a description of what you're building, with examples of its use.

Next, don't make assumptions about what the reader already knows. For example, I have no idea what Flask is, or why I'd want to use it.

More generally, the goal of a tutorial is to increase the reader's understanding. Mostly you're saying "copy this code"; that's one of the things computers are better at than people. (People make typos.) So instead you might as well say "download this code I wrote." Making the reader type in the code can be a useful pedagogic technique, because it slows down the process enough for the reader to be able to absorb an explanation of what the code means/does. But if there isn't an explanation, there's no point.

Next, a minor stylistic point. But first a truth-in-criticism declaration: I always have a hard time convincing colleagues about this. But I'm right and they're wrong, so you're lucky to have me as a teacher. :~) Here's the point: Never say "let's" in teaching materials. It's dishonest, and students know it's dishonest. You (the author) aren't doing whatever it is; they (the readers) are doing it. When you're telling the reader to do something, use the second person (which in the case of imperatives generally means leaving it out altogether: instead of "let's frobnicate the widget" you just say "frobnicate the widget"). "We" is the author of the document, i.e., you. It should be used very sparingly; this is a tutorial about computing, not a tutorial about joecooldoo.

Next, a detail. You have a section "Keep Your Server Up 24/7." But if I'm reading it correctly, it doesn't guarantee that; it just emails you if the server crashes. Right? (Also, is that your actual email address in the picture?)

And finally, at the end we need some pictures (an animated GIF?) of the server actually doing something.

There is no reason to use cors-proxy (allorigins). It just enough to add

from flask_cors import CORS
...
CORS(app)

When I do that it doesn't work.

I'll make the necessary edits =).

Well, it pings the server which keeps the server up.

No. That is a temporary email.

It works. You just created the "app" second time after "CORS(app)"

Replit has a "Fork" function to create a copy of the other user module.

So You may create a template project and just publish its URL to be forked.

Still doesn't work. It broke my server.

Maybe I'll try and figure it out. =) How does the Snap! Cloud work?

Snap! Extensions script pic (2)
Snap! Extensions script pic
Snap! Extensions script pic (1)

It's still not working.

It's Your replit started by me

Result of Your project present:Username=joecooldoo&ProjectName=Snap!%20Extensions
Snap! Extensions script pic
Modified
Snap! Extensions script pic (3)

@dardoro I told @joecooldoo the same thing. It does work. Maybe your server was down at the time you tried it @joecooldoo? Because it worked for me as I said earlier.

Ah, I see. When my computer dies it's because of a power failure, so pinging doesn't help. :~/

Yeah. I think he knows about the Fork thing. He forked my REPL as a template sorta thing for this.

Free servers go down because of TOS, after inactivity. So uptimerobot simulates user activity to keep server up.

Don't the providers of the service object to that? Seems obnoxious.

I don't say anywhere you can't do it. Of course, they don't like it. They lose potential money. You have to pay like 8 bucks a month for "always-on" repls.

It's not just an opportunity cost; the money they pay to keep their server farm going depends on the load.

My point wasn't about what you can or can't do, but about what maybe you shouldn't do.