# Anyone Services II

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

This is a follow up from [Anon Services I](https://docs.anyone.io/sdk/native-sdk/tutorials/services1), 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**](https://docs.anyone.io/sdk/native-sdk/tutorials/services1)**, 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](https://docs.anyone.io/sdk/native-sdk/tutorials/services1), 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 %}