Deploy Sveltekit on VPS Ubuntu 22.04 using Cyberpanel and LiteSpeed
Deploy Sveltekit apps on Cyberpanel is not an average daily activity, just try searching with keyword on search engine “sveltekit cyberpanel”, less than 10k result and thats make deploying sveltekit apps seems more challenging.
Before move to first step, make sure that Cyberpanel is already installed and running on VPS, no need for domain, public IP is suffice, e.g. http://12.34.56.78:8090. Theres many things to cover for configuration etc but I just make it to the point, make sveltekit apps running on Cyberpanel.
Tl;dr
1. Make A Website
Go to Cyberpanel, click on navigation Websites -> Create website. For a demo, random domain is enough.
After finish created, it will show on Websites ->List Websites, click on manage.
Click on preview, and remember the website base URL.
Lets just leave it that way, for a while.
2. Sveltekit Local Source
In local computer, try to create new Sveltekit app, a Sveltekit demo app seems a proper way. For reference: https://kit.svelte.dev/docs/creating-a-project
Before deploying the SvelteKit app, you need to adapt it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment. Read more here: https://kit.svelte.dev/docs/adapters.
In this case, Node is the chosen one. So, do a little favor with Sveltekit build adapter. Start with npm install and install node adapter.
Change one line of code on svelte.config.js.
Then ZIP sources, except node_modules, this inside of zip.
3. Upload, Extract and Install
Go to File Manager website
Browse to ‘public_html’, upload the ZIP file then extract it.
Back to local computer, open a command prompt, since I use Windows 10, it already include SSH.
Before install node_modules with npm, make sure NodeJS is already installed on VPS Ubuntu 22.04. This article can be used as reference: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04
Login to your root via SSH, then go to home directory of website just-for-test.com and enter npm install.
Enternpm run build.
Enter HOST=127.0.0.1 PORT=4000 node build. Sveltekit demo apps should be running.
Leave the command prompt open.
4. LiteSpeed WebAdmin Configuration
This is for make server listen to Sveltekit running apps port. Lets login to OpenLiteSpeed webadmin.
Just in case, how to login to LiteSpeed panel, a reference: https://community.cyberpanel.net/t/tutorial-how-to-setup-and-login-to-openlitespeed-webadmin-console/14052
After login, go to Virtual Hosts
Open virtual host just-for-test.com
Click ‘External App’ tab, on far right, click ‘+’
Create External App, type Web Server, then click next.
Fill every required input, the most important is ‘Address’, the value should be the same with Sveltekit app that running on SSH, thats where LiteSpeed listen to Sveltekit app. Don’t forget to save it.
External App just created, for now ignore the warning notification.
Go to Context, click ‘Context’ tab.
This process also known as proxy, its same like Apache / Nginx proxy. Create New Context type Proxy, then click next.
Fill the required input, URI ‘/’ and choose Web Server that created before, then save it.
See the Context List, it just make new type proxy. Click icon restart to see the result.
Go to your site preview and Sveltekit demo app is running.
Since this is just preview with dummy domain, routes not behaves just like it should be. The solution is make new website and replace just-for-test.com with real active domain. That’s it! Hope this demo tutorial will helpful.
