kldMohammed / portfolio-kobweb

This is a sample project for portfolio built using Kobweb project bootstrapped with the site template.

And it's just a demo when I play with a kobweb, it's not perfect I know 😁😁😁, I copy and paste some code from Kobweb site

Getting Started

First, run the development server by typing the following command in a terminal at this project's root:

kobweb run

Open http://localhost:8080 with your browser to see the result.

You can use any editor you want for the project, but we recommend using IntelliJ IDEA Community Edition downloaded using the Toolbox App.

Press Q (or CMD/CTRL-D) in the terminal to gracefully stop the server.

Navigating the Project

This simple project has a couple of example files you can learn from.

jsMain

• MyApp.kt: This is the entry-point composable called for ALL pages. It's a useful place to specify global html/css styles as well as enable other features (like Silk). Note that the method is annotated with @App which is how Kobweb is aware of it.
• .../components/layout/PageLayout.kt: An example layout which, unlike MyApp, won't get called automatically. Instead, this is a recommended way to organize your high level, shared, layout composables. It is expected that most pages on your site will share the same layout, but you can create others if different pages have different requirements. You can see this project calling this method explicitly in all our pages.
• .../components/sections/NavHeader.kt: An example re-usable composable which represents a section inside a page. This particular example creates a header that makes it easy to navigate between this demo project.
• .../pages/Index.kt: The top level page, which will get rendered if the user visits (yoursite.com)/ (the name index means it will be a special page that gets visited by default when no explicit page is specified). Note that the method is annotated with @Page which is how Kobweb is aware of it.

jvmMain

• .../api/Hello.kt: An example API endpoint that will be run on the server, triggered if the user visits (yoursite.com)/api/hello

Live Reload

Feel free to edit / add / delete new components, pages, and API endpoints! When you make any changes, the site will indicate the status of the build and automatically reload when ready.

Exporting the Project

When you are ready to ship, you should shutdown the development server and then export the project using:

kobweb export

When finished, you can run a Kobweb server in production mode:

kobweb run --env prod

You should be able to run this command in the Cloud provider of your choice, at which point, once your Cloud environment is configured, it will serve your site.