Adding Kobweb to an Existing Project

Currently, Kobweb is still under active development, and due to our limited resources, we are focusing on improving the path to creating a new project from scratch. However, some users have shown interest in Kobweb but already have an existing project and aren't sure how to add Kobweb into it.

As long as you understand that this path isn't officially supported yet, we'll provide steps below to take which may help people accomplish this manually for now. Honestly, the hardest part is creating a correct .kobweb/conf.yaml, which the following steps help you work around:

1. Be sure to check the Kobweb compatibility matrix (COMPATIBILITY.md) to make sure you can match the versions it expects.
2. Create a dummy app project somewhere on your system. Pay attention to the questions it asks you, as you may want to choose a package name that matches your project.

   # In some tmp directory somewhere
   kobweb create app
   # or `kobweb create app/empty`, if you are already
   # experienced with Kobweb and know what you are doing
   

   Copy
3. When finished, copy the site subfolder out into your own project. (Once done, you can delete the dummy project, as it has served its usefulness.)

   $ cp -r app/site /path/to/your/project
   # and then `rm -rf app`
   

   Copy
4. Ensure your Gradle project is configured to include Maven Central and Gradle Plugin Portal repositories, as described in Kobweb artifact repositories.
5. Kobweb uses Gradle version catalogs for its dependencies. Add or update your version catalog under gradle/libs.versions.toml to include these:

   [versions]
   jetbrains-compose = "..." # replace with actual version, see COMPATIBILITY.md!
   kobweb = "..." # replace with actual version
   kotlin = "..." # replace with actual version
   
   [libraries]
   kobweb-api = { module = "com.varabyte.kobweb:kobweb-api", version.ref = "kobweb" }
   kobweb-core = { module = "com.varabyte.kobweb:kobweb-core ", version.ref = "kobweb" }
   kobweb-silk = { module = "com.varabyte.kobweb:kobweb-silk", version.ref = "kobweb" }
   kobwebx-markdown = { module = "com.varabyte.kobwebx:kobwebx-markdown", version.ref = "kobweb" }
   silk-icons-fa = { module = "com.varabyte.kobwebx:silk-icons-fa", version.ref = "kobweb" }
   
   [plugins]
   jetbrains-compose = { id = "org.jetbrains.compose", version.ref = "jetbrains-compose" }
   kobweb-application = { id = "com.varabyte.kobweb.application", version.ref = "kobweb" }
   kobwebx-markdown = { id = "com.varabyte.kobwebx.markdown", version.ref = "kobweb" }
   kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
   

   Copy

If everything is working as expected, you should be able to run Kobweb within your project now:

# In /path/to/your/project
cd site
kobweb run