There is a lack of information about the using Kotlin for Web apps. After spending a lot of hours setting up React in my own Kotlin multiplatform project, I thought I would share the basic setup that I use.
The app uses:
- Redux for state management and redux-thunk for asynchronous actions
- redux-devtools for debugging the Redux store
- React classes and functional components with state hooks
- Material UI provided by muirwik
- A custom webpack configuration (webpack.config.js)
The architecture I use is as follows:
- Container components are the entry points for Redux state and actions
- Functional components are used for styles and also for local state (state hooks)
- Redux reducers and its state/actions are placed in one object called slice (something akin to Redux Toolkit)
- All thunks are defined in a separate class/object (if they use coroutines, the scope can be passed in through the constructor)
To run the app use the standard gradle command browserDevelopmentRun. The app will run on port 8080, but it will not auto open because of the custom webpack config.
./gradlew browserDevelopmentRunThe application in this repository is a collection of information I found about Kotlin/JS in one place. I hope it will help some people with setting up their own React apps in Kotlin.
Here are the resources I used for learning and creating this project:
- Building Web Applications with React and Kotlin/JS
- React in Kotlin/JS, What I learned by Jolanrensen
- Kotlin React Redux PoC (A great resource for learning Redux in Kotlin)
- KotlinExamples (I used it to implement Redux thunk)
The one thing that I couldn't get working is the ErrorBoundary caused by the lack of getDerivedStateFromError. If someone knows how to implements this in Kotlin, please feel free to reach out and improve this example. All other feedback is also appreciated.
A more in-depth description and explanation of the project can be found on My Blog