How to Deploy a Kotlin Multiplatform WebAssembly Project on a Web Server?

After building the project using JetBrains' official Kotlin Multiplatform Wizard and selecting only the Web option, I tried to deploy it on the server but only encountered a white screen.

What I Did

1. Project Setup: Used the Kotlin Multiplatform Wizard, choosing the Web option.

2. Build Commands:

• Ran ./gradlew wasmJsBrowserDevelopmentRun, and the site worked perfectly with the development server running on my browser
• Ran ./gradlew wasmJsBrowserProductionWebpack to build the production bundle.

3. Directory Structure Post-Build:

  └── js
   ├── node_modules
   ├── package.json
   ├── packages
   ├── packages_imported
   └── yarn.lock

Problem

My Hosting Provider is strato.de . They provide me a SFTP access where I uploaded the whole build folder, I am then able to specifiy a "home directory"

The description of home directory is as follows:

In the event of an internal redirection, point your domain to a directory within your web presence.

You can either enter a directory directly or click on a directory. Please ensure that a startup file is present in the selected directory (e.g., index.html, index.php).

If I upload a basic index.html with some basic text, everything works fine but the index.html of this basic build is showing only a white screen.

Question

• How can I properly deploy this Kotlin Multiplatform project to a standard web hosting environment? It should start the webpack server like it does with the ./gradlew wasmJsBrowserDevelopmentRun command, but on my Server.

You can run:

./gradlew wasmJsBrowserDistribution

Then the deployable website files will be located at:

composeApp/build/dist/wasmJs/productionExecutable

The files include index.html and *.wasm (among others).

Instructions available at: https://kotlinlang.org/docs/wasm-get-started.html#generate-artifacts