kotlin / full-stack-web-jetbrains-night-sample

Full-stack demo application written with Kotlin MPP

kotlin-full-stack-application-demo

Fork of https://github.com/mkraynov/kfsad with the new Kotlin/JS Gradle Plugin

A full-stack demo application written in Kotlin for JetBrains Night Moscow 2019.

Run application

• ./gradlew :server:run will build optimized application bundle and run it on https://localhost:8080 (it takes some time to build optimized js bundle, so it is not useful for frontend development)
• ./gradlew :client:run -t will run development application at https://localhost:8080 with live reload. It runs ktor and webpack dev servers under the hood:
  • Webpack dev server will be started at the front https://localhost:8080.
  • Ktor server will be spawned internally at https://localhost:8081 in separate gradle process (webpack devserver will start it)
  • Webpack dev server will call ktor for everything expect *.js files.

Distribution

• ./gradlew :server:build will create server/build/distributions/server-0.1.1.zip. You can deploy it on the server and run bin/server to start the server. Client is included into the lib/server.jar

Description

This application displays a feed containing user-generated posts and comments. All data is stubbed by the fakeJSON and JSON Placeholder services.

It is a Kotlin Multiplatform project.

It uses:

• kotlin-multiplatform, kotlin-js and kotlin-jvm plugins for Kotlin compilation;
• Ktor framework as a web server;
• H2 in-memory database with Exposed to preload posts at application startup;
• kotlinx.serialization for client/server (de-)serialization and RPC;
• React, Styled components, Ring UI 2.0 and kotlin-wrappers for rendering.

During application startup posts are preloaded to the in-memory database from the fakeJSON (or JSON Placeholder) service. When the user requests the page, several posts are selected from the DB and the corresponding comments are fetched via the multi-platform HTTP client. Posts with comments are served to the client via RPC. After the initial render is done, information about authors is fetched via the client-side HTTP client and rendered after all coroutines terminate successfully. The "Load more comments" button fetches additional comments for the post using the multi-platform HTTP client.

This application has no error handling and has very limited RPC serialization. It's not meant for production use and serves only as a technology example.

Contact information

Please refer original repo: https://github.com/mkraynov/kfsad

full-stack-web-jetbrains-night-sample's Issues

Sample project does not load

Hi

When I run the sample project from Intellij "Development Run" I get

BUILD SUCCESSFUL in 2m 8s
12 actionable tasks: 10 executed, 2 up-to-date

Waiting for changes to input files of tasks... (ctrl-d then enter to exit)
<i> [webpack-dev-server] [HPM] Proxy created: /  -> http://localhost:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.20:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Projects\full-stack-web-jetbrains-night-sample\client\build\processedResources\js\main' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/ to http://localhost:8080/ [ENOBUFS] (https://nodejs.org/api/errors.html#errors_common_system_errors)

If I run the same project from the terminal: ./gradlew :client:run -t

> Configure project :client
Project property 'kotlin.parallel.tasks.in.project' is deprecated.
By default it depends on Gradle parallel project execution option value.

> Configure project :shared
Kotlin Multiplatform Projects are an Alpha feature. See: https://kotlinlang.org/docs/reference/evolution/components-stability.html. To hide this message, add 'kotlin.mpp.stability.nowarn=true' to the Gradle properties.


> Task :kotlinNpmInstall
warning workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > webpack-dev-server > url > [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API i
nstead.
warning workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > webpack-dev-server > sockjs > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain ci
rcumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/[email protected]" has incorrect peer dependency "core-js@>=3.0.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/[email protected]" has unmet peer dependency "react@>=16.8.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/[email protected]" has unmet peer dependency "react-dom@>=16.8.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0
.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has incorrect peer dependency "webpack@^4.0.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "@types/react@>=16".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "react@>=16".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "react@^16.3.0-0 || ^17.0.0-0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "react-dom@^16.3.0-0 || ^17.0.0-0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "react@^15.3.0 || ^16.0.0-alpha".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "react-dom@^15.3.0 || ^16.0.0-alpha".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > [email protected]" has unmet peer dependency "react@^15.3.0 || ^16.0.0 || ^17.0.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > @jetbrains/ring-ui > react-markdown > [email protected]" has unmet peer dependency "react@^16.0 || ^17.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > kotlin-wrappers-kotlin-react-dom-js-ir > [email protected]" has unmet peer dependency "[email protected]".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > kotlin-wrappers-kotlin-styled-js-ir > [email protected]" has unmet peer dependency "react@>= 16.8.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > kotlin-wrappers-kotlin-styled-js-ir > [email protected]" has unmet peer dependency "react-dom@>= 16.8.0".
warning "workspace-aggregator-5416cb96-b9ab-4461-8193-238c285a81fe > kotlin-full-stack-application-demo-client > kotlin-wrappers-kotlin-styled-js-ir > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.1.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 14s
12 actionable tasks: 6 executed, 6 up-to-date

Waiting for changes to input files of tasks... (ctrl-d then enter to exit)
<i> [webpack-dev-server] [HPM] Proxy created: /  -> http://localhost:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.20:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Projects\full-stack-web-jetbrains-night-sample\client\build\processedResources\js\main' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/ to http://localhost:8080/ [EADDRINUSE] (https://nodejs.org/api/errors.html#errors_common_system_errors)
<-------------> 0% WAITING
> IDLE
> IDLE

And then it gets stuck at 0%

However the production version works: ./gradlew :server:run

project(":server").afterEvaluate looks strange in client/build.gradle

The following looks suspicious

https://github.com/Kotlin/kotlin-full-stack-application-demo/blob/ade07b879ec449d7ae9ad9bd3bb17baeee09543a/client/build.gradle#L53-L57

What is the purpose of the code?

Should it be written as

run {
    dependsOn ":server:prepareDevServer"
}

?

How to change dependency version of node?

Error while trying to run project by executing ./gradlew :server:run:

Could not determine the dependencies of task ':kotlinNodeJsSetup'.
> Could not resolve all files for configuration ':detachedConfiguration2'.
   > Could not find org.nodejs:node:14.17.0.
     Searched in the following locations:
       - https://repo.maven.apache.org/maven2/org/nodejs/node/14.17.0/node-14.17.0.pom
       - https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven/org/nodejs/node/14.17.0/node-14.17.0.pom
       - https://nodejs.org/dist/v14.17.0/node-v14.17.0-darwin-arm64.tar.gz
     Required by:
         project :

Could not find node-v14.17.0-darwin-arm64.tar.gz at node v14.17.0,
But support of darwin-arm64 can be found at other node versions like v16.17.0.
So, How can I change the dependency version of node?

Security: Static client resources are loaded from the root package, giving access to the entire backend jar

The static client resources are loaded from the root package, which gives clients access to the entire backend jar.

For example, run the server and then try to access:

http://localhost:8080/application.conf

or

http://localhost:8080/MainKt.class

Both of these work!

The copy task at https://github.com/Kotlin/full-stack-web-jetbrains-night-sample/blob/master/server/build.gradle.kts#L55-L57 should be modified to put the resources into a subdirectory e.g. web, and then ktor configured to serve static resources from the web package only.

PK81UNIL0109000274655607

Bad cross-project publication used

server/build.gradle.kts uses this:

tasks.withType<Copy>().named("processResources") {
    from(project(":client").tasks.named("browserDistribution"))
}

This is not only bad practice, it only works by accident, is unsafe and can lead to non-reproducible and hard to parallelize builds.

You can find more information and how to do it properly on https://docs.gradle.org/current/userguide/cross_project_publications.html

Project does not run - Unable to load '@webpack-cli/serve' command

Grabbing the project, opening it in IntelliJ and then running "Development Run" results in the error:

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function

Stack overflow suggests adding this to the build.gradle.kts as a possible solution:

rootProject.plugins.withType(org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin::class.java) {  
    rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().versions.webpackCli.version = "4.9.0"
}

Which seems to partly help, and the site opens, but it only displays the text "Cannot GET /"

The other solution on that page (kotlin.js.webpack.major.version=4 in gradle.properties) throws up whole pile of different errors and webpack cannot complete at all.