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."
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:
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:
Reload the anon.service:
Set up and build the SvelteKit application
Create a project directory:
Initialize the project:
See SvelteKit documentation for more information about setting up projects.
We chose these options for the example:
Install dependencies:
Configure the SvelteKit Node Adapter:
Edit the svelte.config.js file located in your project folder.
Change the import line to import the new adapter-node:
Load environment variables:
Add a .env file with PORT and HOSTNAME:
Build the project:
Move the build output to /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:
Access the service via SOCKS5:
Hostname located at: ./anon/anon_service/hostname
Hostname located at: /var/lib/anon/anon_service/hostname
cat <<EOL | tee -a ./anon/anonrc
HiddenServicePort 5173 127.0.0.1:5173
EOL
cat <<EOL | tee -a /etc/anon/anonrc
HiddenServicePort 5173 127.0.0.1:5173
EOL
sudo systemctl reload anon.service
mkdir -p ~/anyone
cd ~/anyone
npx sv create my-svelte-anon-app
โ 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!