Publish p5 project

p5.js Project Guidance
1

Hey, I have a p5 project on my computer (HTML, CSS, a few js scripts, and some audio files) and I want to publish it.
I can’t use the p5 web editor because the audio files are too big.
What is the best way to do it? I heard about Vercel, is it good?
Also, I want to know how many people have seen my project (went to the website), can I do that?
Thank you :slight_smile:

1 Like
2

Do you have a server available for hosting your project? If not, you could consider having the site hosted by Google, as a possible solution. Check out the following combination of products to determine whether, together, they might serve your needs, and compare it to Vercel:

You can have your project hosted at a Google data center.

You can set up a project on Google App Engine, using a web framework such as Flask.

See also Flask.

You can purchase a domain name from Google and redirect it to your project.

You can collect statistics on the use of your project by visitors with Google Analytics.

Not sure if this combination would meet your needs, but you could check it out.

4 Likes
3

thank you for your answer, it is really helping!
what is the difference between the first link (cloud computing services) and the second one (App Engine)?
And I have to use flask? (never used it :smiling_face_with_tear:)

maybe do you know a tutorial about how to do that?

1 Like
4

Flask is one of the web frameworks that Google and, for sure, many other web hosting services make available to users. Essentially, it would be responsible for serving whatever .html files you want to offer to the public, but it is typically used to also execute Python scripts that users have written that are designed to compose .html pages on the fly. This would offer you the flexibility to have the .html composed at execution time. For example, I have some Python scripts hosted on Google Cloud that randomly scramble a set of words and write the .html to display them. However, with Flask, you don’t need to commit to serving .html that way. You may instead use it to serve static .html pages that you have written yourself. Those .html pages can interact with JavaScript, serve video, or do whatever .html pages do. I use that technique to serve some p5.js sketches.

For example, the following is a Python script that I am using, with a slight change, to simply serve an .html page named index.html that contains a p5.js sketch:

from flask import Flask, render_template

app = Flask(__name__)

app.url_map.strict_slashes = False

@app.route('/')
def home():
    return render_template('index.html')
    
# favicon   
@app.route("/favicon.ico/")
def favicon():
    return render_template("favicon.ico.html")
    
if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8080, debug=False)

You or anyone else could simply copy that page and use it to serve your own index.html file with Flask. With some added lines, you could serve additional .html pages.

In addition to the Python script and index.html file, you would need a few other files to get things to work with Flask, but those files are fairly simple.

If you wish to learn enough about Flask to serve .html pages, you can check out the Flask web site linked in my previous reply. Google also has some information about it.

App Engine is part of Google Cloud. It is what would manage Flask along with the files you are serving, including .html files, JavaScript, .css, and video, and would execute Python scripts if you are using Flask in that manner. With App Engine, you have other choices besides Python and Flask. For example, you could use Java, Go or other options to serve your files instead.

EDIT:

You should probably get additional opinions about all of the above. I am accustomed to that configuration, but there might be better options for you.

5 Likes
5

Hi @Omri,

Along with those great answers, I also highly recommend https://surge.sh/.

It allows you to publish your site from the command line with only two commands and no setup (which is awesome) :wink:

I used it for some projects and portfolio so you can upload images and medium sized files.

(It’s only for static websites, meaning no backend of any sort, just html, css, JS and other files)

5 Likes