Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[📖] Instructions - How to run partytown with fewest lines of code possible #660

Open
thomas-optimove opened this issue Jan 24, 2025 · 4 comments
Open

[📖] Instructions - How to run partytown with fewest lines of code possible #660

thomas-optimove opened this issue Jan 24, 2025 · 4 comments
Labels
documentation Improvements or additions to documentation

Comments

@thomas-optimove
Copy link

thomas-optimove commented Jan 24, 2025 •
edited
Loading

Documentation

I have been exploring what it takes to run partytown. I was able to create a simple HTML page with the partytown js files in same dir. I thought it might be useful to others so am sharing here.

I have also created a public gist with the instructions:
https://gist.github.com/thomas-optimove/f0798aaeffaa34f706fdcfa119c91fdd

Setup Script

# Setup folder for our demo
mkdir ./demo
mkdir ./demo/~partytown
cd demo/~partytown

# Fetch the partytown library code and worker code to local dir
curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown-sw.js
curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown.js

# Add the demo.html script into this file
nano ./demo.html

# Important, we must be able to serve the ~partytown folder from server
cd ..

# Run the demo folder using http python server
python3 -m http.server 8092

# Open browser at 
http://localhost:8092/~partytown/demo.html

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Simple HTML with Partytown</title>
    </head>
    <body>
        <!-- Include Partytown JS from the same directory -->
        <script src="partytown.js"></script>

        <!-- Mark this script to run inside a Web Worker (Partytown) -->
        <script type="text/partytown">
            function hello(message) {
                console.log(`Hello, ${message}!`);
            }
            
            hello('world');
        </script>
    </body>
</html>

When the page loads (it will be blank) you should see in the JavaScript Console:

Image
@thomas-optimove thomas-optimove added the documentation Improvements or additions to documentation label Jan 24, 2025
@gioboa
Copy link
Member

gioboa commented Jan 24, 2025

Hi @thomas-optimove as you can see from the warning in the console now the project is under a different org.
Would you like to transform this issue into a doc PR?

@thomas-optimove
Copy link
Author

Hi @thomas-optimove as you can see from the warning in the console now the project is under a different org.
Would you like to transform this issue into a doc PR?

Sure that would be appreciated thanks

@thomas-optimove
Copy link
Author

thomas-optimove commented Jan 24, 2025 •
edited
Loading

So I should create a markdown file in /docs/ ?

I've updated the curl in the OP and the gist to reflect the new org

curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown-sw.js
curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown.js

@gioboa
Copy link
Member

gioboa commented Jan 24, 2025

So I should create a markdown file in /docs/ ?

I've updated the curl in the OP and the gist to reflect the new org

curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown-sw.js
curl -O -L https://unpkg.com/@qwik.dev/partytown@latest/lib/partytown.js

Yep, sure, you can look at the other pages. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gioboa @thomas-optimove