Deploying /Hosting Kotlin-React App
Tags: Publishing, Heroku, Kotlin Js, Kotlin Multiplatform, Deployment

Creating app with kotlin is no doubt easier than any of the other technologies out there !! But To Deploy it to the internet is something that can get really tricky . When I first tried to host my kotlin website I First Thought of Firebase hosting as it is so easy to use with angular and react JS But it didn’t quit work the way I expected ! so I used the second best Option (Now It’s it has taken the lead though) was HEROKU🎈 . So Here I have step by step mentioned on how to host your kotlin/js app using heroku :

1.Setting Up : In Order to start using heroku we first need to sign up to heroku services which is nothing so that you need a guide for so I assume that you managed to do that yourself and then you need to set up heroku cli to your computer by first downloading heroku cli and then logging in via your cli simply by command “heroku login” !! remember that you don’t need to buy any plans in order to get started with heroku (you don’t need to enter any credit card info also) the first five deploy with heroku are totally free of cost but if you want to use some additional features or services of heroku then that may cost you accordingly but for starters i recommend using free heroku plans . 2.Make Your App A Git Repo : Now In order to publish you kotlin js app you need to first make it a git repo by navigating to the folder and using command “git init” this will turn your app root folder into a git folder and after that you could simply run “heroku create” which will create an app in your heroku dashboard and will give a git repository link also . This git link is really special as now you can just push new changes to it’s remote heroku master branch and it will automagically update your web app on the internet (amazing isn’t it?) and then just add and commit the everything in your app root folder .

heroku create …👆git repo

git init

heroku create

git add .

git commit -m "Your commit message"



NOTE : -> Now heroku might give you some weird name to your app which is something you don’t want as the app name will effect domain name of site .

Like heroku might give you name like “Jummpy-frog-112” which when you will publish your app your web link will be like “https://Jummpy-frog-112.herokuapp.com/”

and that’s not cool at all but you can surely fix it by renaming your app name to something cool like “medium” and your web link will then look something like “https://medium.herokuapp.com/” . To change the name just type following commands :

heroku apps:rename --app "old-app-name" "new-app-name" Like in our case : heroku apps:rename --app "Jummpy-frog-112" "medium"

You can see the app name change in your heroku dashboard too ..

3. Adjusting build packs : Unlike other jvm applications like spring or ktor kotlin js app generates some static pages and js files so heroku need to be configured for that which is really easy to do with heroku by just few of the commands like :

in order of our heroku/gradle buildpack to run our gradle needs to have a stage task which is what we generally know as build task , stage task and build task are equivalent but heroku use stage task so we need to add 2 more lines of code to our “build.gradle.kts” file

kotlin{

.....

} // This 👇

tasks.register("stage") {

dependsOn("build")

}

4. Adding static.json file to root of our project : We are almost there !! just one more step that is we need to configure our buildpack-static by adding a new json file “static.json” in the root folder of our project and add a root property in that file :

static .json

in the static.json give following property :

{

"root": "build/distributions"

}

5. Deploying Your App To The world : Congrats now all that left to do is to deploy your badass website to the real world which is just to commit the changes we did so far and then pushing it to remote heroku’s master branch

git add -A

git commit -m "your commit message "

git push heroku master

And BOOM !!🎉 heroku will do rest of the work and at last it will return you your badass web app link which would be somewhat like “https://YOUR APP NAME.herokuapp.com/”:

Done ❤

Thanks For Reading ❤ ,