{"id":13428797,"url":"https://github.com/Kotlin/kotlin-frontend-plugin","last_synced_at":"2025-03-16T01:33:34.565Z","repository":{"id":66329282,"uuid":"74062359","full_name":"Kotlin/kotlin-frontend-plugin","owner":"Kotlin","description":"Gradle Kotlin (http://kotlinlang.org) plugin for frontend development","archived":true,"fork":false,"pushed_at":"2020-04-23T11:02:13.000Z","size":557,"stargazers_count":563,"open_issues_count":86,"forks_count":69,"subscribers_count":44,"default_branch":"master","last_synced_at":"2024-10-27T06:39:06.413Z","etag":null,"topics":["gradle","karma","kotlin","npm","webpack"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kotlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-17T19:58:16.000Z","updated_at":"2024-10-22T11:05:32.000Z","dependencies_parsed_at":"2023-03-13T20:29:55.527Z","dependency_job_id":null,"html_url":"https://github.com/Kotlin/kotlin-frontend-plugin","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kotlin%2Fkotlin-frontend-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kotlin%2Fkotlin-frontend-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kotlin%2Fkotlin-frontend-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kotlin%2Fkotlin-frontend-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kotlin","download_url":"https://codeload.github.com/Kotlin/kotlin-frontend-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814905,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gradle","karma","kotlin","npm","webpack"],"created_at":"2024-07-31T01:01:05.395Z","updated_at":"2025-03-16T01:33:34.166Z","avatar_url":"https://github.com/Kotlin.png","language":"Kotlin","funding_links":[],"categories":["Libraries","Recently Updated","Kotlin"],"sub_categories":["Build \u0026 Development Tools","[Oct 28, 2024](/content/2024/10/28/README.md)"],"readme":"# kotlin-frontend-plugin  [ ![Download](https://api.bintray.com/packages/kotlin/kotlin-eap/kotlin-frontend/images/download.svg) ](https://bintray.com/kotlin/kotlin-eap/kotlin-frontend/_latestVersion) [![TeamCity (simple build status)](https://img.shields.io/teamcity/http/teamcity.jetbrains.com/s/KotlinTools_KotlinFrontendPlugin_Build.svg)](https://teamcity.jetbrains.com/viewType.html?buildTypeId=KotlinTools_KotlinFrontendPlugin_Build)\n\n## THIS PLUGIN IS DEPRECATED\nKotlin/JS plugin contains features of `kotlin-frontend-plugin`.  \nFor setting up project with Kotlin/JS Gradle Plugin, please follow  \nhttps://kotlinlang.org/docs/reference/js-project-setup.html\n***\nGradle plugin for Kotlin frontend development\n\nThe plugin provides an easy way to gather Maven and npm dependencies, pack bundles (via [webpack](https://webpack.github.io/)) and test a frontend application using [Karma](https://karma-runner.github.io/1.0/index.html). By default the plugin generates all required configs for webpack, karma and manages the corresponding daemons.\n\nBy using Gradle continuous build, you also can get hot module replacement feature (apply code changes in browser on the fly). See corresponding [section below](#hot-module-replacement).\n\n# Howto\n\n### Configure Gradle project\n\nFirst of all you have to apply plugin `org.jetbrains.kotlin.frontend` and setup Kotlin:\n\n```gradle\nbuildscript {\n    ext.kotlin_version = '1.3.21'\n\n    repositories {\n        jcenter()\n        maven {\n            url \"https://dl.bintray.com/kotlin/kotlin-eap\"\n        }\n    }\n\n    dependencies {\n        classpath \"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version\"\n        classpath \"org.jetbrains.kotlin:kotlin-frontend-plugin:0.0.45\"\n    }\n}\n\n\n// apply plugin\napply plugin: 'org.jetbrains.kotlin.frontend'\n\n// apply kotlin2js\napply plugin: 'kotlin2js'\n\n// configure kotlin compiler\ncompileKotlin2Js {\n    kotlinOptions.metaInfo = true\n    kotlinOptions.outputFile = \"$project.buildDir.path/js/${project.name}.js\"\n    kotlinOptions.sourceMap = true\n    kotlinOptions.moduleKind = 'commonjs'\n    kotlinOptions.main = \"call\"\n}\n```\n\n### Setup npm dependencies\n\nAll frontend plugin settings are applied in `kotlinFrontend` section:\n\n```\nkotlinFrontend {\n    npm {\n        dependency \"style-loader\" // production dependency\n        devDependency \"karma\"     // development dependency\n    }\n}\n```\n\n### webpack bundler\n\nTo create a webpack bundle (for both packaging and running the dev server):\n\n```\nkotlinFrontend {\n    webpackBundle {\n        bundleName = \"main\"\n    }\n}\n```\n\n### Complete example\n\nSee [examples/frontend-only/build.gradle](examples/frontend-only/build.gradle) for a full example.\n\n# Building and running\n\nTo run dev server (that also will build kotlin sources):\n\n`gradlew run`\n\nTo run tests:\n\n- run `gradlew tests` to build the tests and start the Karma daemon\n- open `http://localhost:9876` to run the tests in your browser using Karma\n\nTo pack the bundle:\n\n`gradle bundle`\n\nTo stop running webpack and Karma daemons:\n\n`gradle stop`\n\n# webpack\n\nwebpack configuration: \n\n```\nkotlinFrontend {\n    webpackBundle {\n        bundleName = \"main\"\n        sourceMapEnabled = true | false   // enable/disable source maps \n        contentPath = file(...) // a file that represents a directory to be served by dev server)\n        publicPath = \"/\"  // web prefix\n        host = \"localhost\" // dev server host\n        port = 8088   // dev server port\n        proxyUrl = \"\" | \"http://....\"  // URL to be proxied, useful to proxy backend webserver\n        stats = \"errors-only\"  // log level\n    }\n}\n```\n\ndev server log is located at `build/logs/webpack-dev-server.log`\n\nconfig file is generated at `build/webpack.config.js`\n\n## webpack configuration customization\n\nTo customize webpack configuration, you can apply additional scripts by placing them in the directory `webpack.config.d`. The scripts will be appended to the end of config script. Use number prefix to change order (it is very similar to UNIX rc.d config directories)\n\nSample structure:\n\n- [DIR] webpack.config.d\n  - css.js\n  - minify.js\n  - 10-apply-ealier.js\n  - 20-apply-later.js\n\n# Karma\n\nKarma configuration:\n\n```\nkotlinFrontend {\n    karma {\n        port = 9876\n        runnerPort = 9100\n        reporters = listOf(\"progress\") \n        frameworks = listOf(\"qunit\") // for now only qunit works as intended\n        preprocessors = listOf(\"...\")\n    }\n}\n```\nThis will generate a config file located at `build/karma.conf.js`.\n\nNote that for your tests to run correctly with webpack their module type must be defined as well:\n```\ncompileTestKotlin2Js {\n    kotlinOptions.metaInfo = true\n    kotlinOptions.moduleKind = 'commonjs'\n}\n```\n\nIf you would like to use a custom `karma.config.js` then specify it using `customConfigFile`:\n\n```\nkotlinFrontend {\n    karma {\n        customConfigFile = \"myKarma.conf.js\"\n    }\n}\n```\n\nYour custom config file will be copied to the build folder and renamed to `karma.config.js`.\n\nkarma log is located at `build/logs/karma.log`\n\n# Hot module replacement\n\nWebpack provides ability to apply code changes on the fly with no page reload (if possible). For reference see [Webpack Hot Module Replacement documentation](https://webpack.js.org/concepts/hot-module-replacement/)\n\nWebpack does a lot of work for you however to get it working well most likely you have to implement state save and restore functionality via webpack's API. See [HMR.kt](examples/frontend-only/src/main/kotlin/test/hello/HMR.kt) for corresponding Kotlin external declarations for webpack API and [main.kt](examples/frontend-only/src/main/kotlin/test/hello/main.kt) for sample save/load.\n\nBriefly at module load accept HMR feature and listen for disposal\n\n```kotlin\nmodule.hot?.let { hot -\u003e\n    hot.accept() // accept hot reload\n    \n    hot.dispose { data -\u003e // listen for disposal events\n        data.my-fields = [your application state] // put your state in the 'data' object\n    }\n}\n```\n\nTo get previously saved state at module load use `module.hot?.data`\n\n```kotlin\n    module.hot?.data?.let { data -\u003e // if we have previous state then we are in the middle of HMR\n        myRestoreFunction(data) // so get state from the 'data' object\n    }\n```\n\nFinally use Gradle continuous build with run task to get live replacement every time you change your code.\n\n```\ngradlew -t run\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKotlin%2Fkotlin-frontend-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKotlin%2Fkotlin-frontend-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKotlin%2Fkotlin-frontend-plugin/lists"}