Anyone Services II

Setting Up Services on the Anyone Network

Integrate SvelteKit with nginx, anon, and anyone-client

This is a follow up from Anon Services I, where we'll give an example of another application set up as a service on the Anyone Network.

"Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It’s a love letter to web development.

But don’t take our word for it. Developers consistently rank Svelte as the framework they’re most excited about using."

- https://svelte.dev

Let's start!

If you haven't followed the steps in the previous chapter, go ahead and do so before you continue following along in the instructions below.

Set up nginx for SvelteKit

Create a new nginx configuration for the Svelte service:

sudo nano /etc/nginx/sites-available/anon_service_svelte

Add this configuration to route requests to the Svelte app:

server {
    listen 127.0.0.1:5173;
    server_name localhost;

    root /var/www/my-svelte-anon-app/build;
    allow all;
    index index.js;

    location / {
        try_files $uri $uri/ =404;
    }
}

Enable Svelte and Reload nginx:

sudo ln -s /etc/nginx/sites-available/anon_service_svelte /etc/nginx/sites-enabled/
sudo systemctl reload nginx

Configure anyone-client and anon for Svelte

Add port mapping for Svelte to existing anonrc configuration:

If you followed the steps in Anon Services I, we created our custom anonrc in the ./anon folder. Append the port mapping to the configuration with this command:

cat <<EOL | tee -a ./anon/anonrc
HiddenServicePort 5173 127.0.0.1:5173
EOL

Set up and build the SvelteKit application

Create a project directory:

mkdir -p ~/anyone
cd ~/anyone

Initialize the project:

npx sv create my-svelte-anon-app

See SvelteKit documentation for more information about setting up projects. We chose these options for the example:

┌  Welcome to the Svelte CLI! (v0.6.1)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◇  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-svelte-anon-app                                                │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: npm run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

Install dependencies:

cd my-svelte-anon-app
npm install

Configure the SvelteKit Node Adapter:

npm install -D @sveltejs/adapter-node

Edit the svelte.config.js file located in your project folder. Change the import line to import the new adapter-node:

import adapter from '@sveltejs/adapter-node';

Load environment variables:

npm i dotenv

Add a .env file with PORT and HOSTNAME:

cat <<EOL | tee .env
PORT=5173
HOST=127.0.0.1
EOL

Build the project:

npm run build
#systemctl reload nginx

Move the build output to /var/www/my-svelte-anon-app:

sudo mkdir -p /var/www/my-svelte-anon-app
sudo cp -r build/ /var/www/my-svelte-anon-app/

Testing the Svelte-based anon service

Confirm that the app is accessible locally at http://127.0.0.1:5173:

curl http://127.0.0.1:5173

Access the service via SOCKS5:

Hostname located at: ./anon/anon_service/hostname

curl --socks5-hostname 127.0.0.1:9050 "http://$(cat ./anon/anon_service/hostname):5173"