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
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.
This simple project has a couple of example files you can learn from.
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 (likeSilk
). Note that the method is annotated with@App
which is howKobweb
is aware of it..../components/layout/PageLayout.kt
: An example layout which, unlikeMyApp
, 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 nameindex
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 howKobweb
is aware of it.
.../api/Hello.kt
: An example API endpoint that will be run on the server, triggered if the user visits(yoursite.com)/api/hello
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.
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.