> For the complete documentation index, see [llms.txt](https://docs.anyone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.anyone.io/sdk/native-sdk/tutorials/services2.md).

# Anyone Services II

## Integrate SvelteKit with nginx, anon, and anyone-client

This is a follow up from [Anon Services I](/sdk/native-sdk/tutorials/services1.md), 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](https://svelte.dev/)<br>

Let's start!

**If you haven't followed the steps in the** [**previous chapter**](/sdk/native-sdk/tutorials/services1.md)**, 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:

```bash
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:

```bash
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:

{% tabs %}
{% tab title="anyone-client" %}
If you followed the steps in [Anon Services I](/sdk/native-sdk/tutorials/services1.md), we created our custom anonrc in the `./anon` folder. Append the port mapping to the configuration with this command:

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

{% endtab %}

{% tab title="anon.service" %}
With the Debian package, the `anon.service` stores the default `anonrc` in `/etc/anon/`.\
Append the port mapping to the configuration with this command and then reload the service:

```bash
cat <<EOL | tee -a /etc/anon/anonrc
HiddenServicePort 5173 127.0.0.1:5173
EOL
```

Reload the `anon.service`:

```bash
sudo systemctl reload anon.service
```

{% endtab %}
{% endtabs %}

### Set up and build the SvelteKit application

Create a project directory:

```bash
mkdir -p ~/anyone
cd ~/anyone
```

Initialize the project:

```bash
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:

```bash
cd my-svelte-anon-app
npm install
```

Configure the SvelteKit Node Adapter:

```bash
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:

```bash
npm i dotenv
```

Add a `.env` file with `PORT` and `HOSTNAME`:

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

Build the project:

```bash
npm run build
#systemctl reload nginx
```

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

```bash
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`:

```bash
curl http://127.0.0.1:5173
```

Access the service via SOCKS5:

{% tabs %}
{% tab title="anyone-client" %}
Hostname located at: `./anon/anon_service/hostname`

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

{% endtab %}

{% tab title="anon.service" %}
Hostname located at: `/var/lib/anon/anon_service/hostname`

```bash
curl --socks5-hostname 127.0.0.1:9050 "http://$(cat /var/lib/anon/anon_service/hostname):5173"
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.anyone.io/sdk/native-sdk/tutorials/services2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.