https://github.com/bitspittle/appxyz
https://github.com/bitspittle/appxyz
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bitspittle/appxyz
- Owner: bitspittle
- Created: 2023-10-07T23:32:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-23T04:10:10.000Z (over 2 years ago)
- Last Synced: 2025-01-21T19:48:05.701Z (over 1 year ago)
- Language: HTML
- Size: 1.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is a [Kobweb](https://github.com/varabyte/kobweb) project bootstrapped with the `app` template.
## Getting Started
First, run the development server by typing the following command in a terminal under the `site` folder:
```bash
$ cd site
$ kobweb run
```
Open [http://localhost:8080](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](https://www.jetbrains.com/toolbox-app/).
Press `Q` 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.
* `.../pages/About.kt`: An additional page, which will get rendered if the user visits `(yoursite.com)/about`. This page
doesn't do much but exists as a way to demonstrate a multi-page layout.
* `.../resources/markdown/Markdown.md`: A markdown file which generates a reactive page for you automatically at compile
time. This page will get rendered if the user visits `(yoursite.com)/markdown` If you are writing a blog, it can be
very convenient to write many of your posts using markdown instead of Kotlin code. You can call out to components
within your markdown using the inline `${...}` syntax, e.g. `${.components.widget.VisitorCounter}`, or use the
block `{{{ ... }}}` syntax to put a larger widget on its own line.
### 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:
```bash
$ kobweb export
```
When finished, you can run a Kobweb server in production mode:
```bash
$ kobweb run --env prod
```
If you want to run this command in the Cloud provider of your choice, consider disabling interactive mode since nobody
is sitting around watching the console in that case anyway. To do that, use:
```bash
$ kobweb run --env prod --notty
```
Kobweb also supports exporting to a static layout which is compatible with static hosting providers, such as GitHub
Pages, Netlify, Firebase, any presumably all the others. You can read more about that approach here:
https://bitspittle.dev/blog/2022/staticdeploy