Search code examples
kotlinktor

How do I automatically serve CSS stylesheets and JS scripts using ktor?

I am trying to setup a local server for API-callback using ktor under localhost:8080. The purpose of this server is to:

  1. Get the API response code from the URL parameters
  2. Serve a webpage under the same URL that shows the user the state of the callback

Currently i have this code:

  fun Application.configureRouting() {
    staticResources(remotePath = "/callback", basePackage = "static") {
      enableAutoHeadResponse()

      get {
        val params: Parameters = call.parameters
        val requestState = AuthState(params["state"]!!)

        if (!AuthState.currentlyUsedStates.contains(requestState))
          throw Exception("Request Cancelled, State forgery was detected.")

          val response = AuthorizationResponse
          val responseData = response.data

          responseData.state = params["state"]!!

          if (params.contains("code"))
            responseData.code = params["code"]

          if (params.contains("error"))
            responseData.error = params["error"]

          response.save()
          requestState.remove()
      }
    }
  }

File structure:

projectRoot
  └── src/
    └── main/
      └── resources/
        └── static/
          ├── css/
          │   ├── style.css
          │   ├── light.css
          │   └── dark.css
          ├── js/
          │   ├── theme.js
          │   └── main.js
          └── index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dark.css">
    <link rel="stylesheet" href="css/light.css">
    <title>Callback</title>
</head>
<body>
  <!-- Website layout and stuff -->
</body>

<script src="js/theme.js"></script>
<script src="js/callback.js"></script>
</html>

Now my problem is that neither the stylesheets linked in the <head> nor the scripts referenced by the src attribute are actually served to the user when requesting the page, resulting in the bare-bones unstyled HTML look. So how do I automatically send them along the index.html?

I have read through old stackoverflow questions and articles but all of them seem to be very outdated and using deprecated methods.

Solution

  • Sooo, appearently the fix was really simple. I just had to change the link to the files from a relative link to a static link.

    Like this: before.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/dark.css">
    <link rel="stylesheet" href="css/light.css">
    <title>Callback</title>
</head>
<body>
  <!-- Website layout and stuff -->
</body>

<script src="js/theme.js"></script>
<script src="js/callback.js"></script>
</html>

    after.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://localhost:8080/callback/css/style.css">
    <link rel="stylesheet" href="http://localhost:8080/callback/css/dark.css">
    <link rel="stylesheet" href="http://localhost:8080/callback/css/light.css">
    <title>Callback</title>
</head>
<body>
  <!-- Website layout and stuff -->
</body>

<script src="http://localhost:8080/callback/js/theme.js"></script>
<script src="http://localhost:8080/callback/js/callback.js"></script>
</html>

    Or in more general:
    ./subfolder/file.ext
    had to turn into
    http://localhost:8080/callback/subfolder/file.ext