Integrate SvelteKit with nginx, anon, and anyone-client
This is a follow up from , 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."
-
Let's start!
If you haven't followed the steps in the , 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:
Add port mapping for Svelte to existing anonrc configuration:
cat <<EOL | tee -a ./anon/anonrc
HiddenServicePort 5173 127.0.0.1:5173
EOL
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:
cat <<EOL | tee -a /etc/anon/anonrc
HiddenServicePort 5173 127.0.0.1:5173
EOL
Reload the anon.service:
sudo systemctl reload anon.service
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: