How to run a full stack web app in continuous mode...

# multiplatform

[Sourabh Rawat]

How to run a full stack web app in continuous mode ?

[Big Chungus]

Start server, start client, start build with -t flag

[Sourabh Rawat]

Ok so I ran in separate terminals

./gradlew run
 ./gradlew frontendBrowserDevelopmentRun
 ./gradlew build -t

But if i change frontend code. the build job picks up the changes but when I refresh localhost:8080, no changes there

[Big Chungus]

Are you sure your frontend is running on 8080?

[Big Chungus]

I think the default is 8081

[Big Chungus]

8080 might be served by your backend

[Sourabh Rawat]

Right. But on 8081. I am getting Cannot GET /

[Sourabh Rawat]

I see

> Task :frontendBrowserDevelopmentRun
Module build failed (from C:/Users/srawa/Projects/thatnumbergame/build/js/node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'C:\Users\srawa\Projects\thatnumbergame\build\js\node_modules\webpack-dev-server\client\index.js'
Module build failed (from C:/Users/srawa/Projects/thatnumbergame/build/js/node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'C:\Users\srawa\Projects\thatnumbergame\build\js\node_modules\webpack-dev-server\client\index.js'
Module build failed (from C:/Users/srawa/Projects/thatnumbergame/build/js/node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'C:\Users\srawa\Projects\thatnumbergame\build\js\node_modules\webpack-dev-server\client\index.js'

in the front end job logs

[Big Chungus]

Are you able to send your gradle config?

[Big Chungus]

Got it. Try running only server and frontend, both with -t

[Big Chungus]

I'm assuming you have ktor backend with hot reload

[Sourabh Rawat]

I am not sure. I just auto generated the project structure from IDEA latest

[Big Chungus]

Chech the dependencies and send me src/jvmMain/resources/application.conf if it's there

[Sourabh Rawat]

the code: https://github.com/dragneelfps/thatnumbergame

[Big Chungus]

Oooh, you don't even have a separate frontend 😄 it's a server rendered client 😄

[Big Chungus]

Add me as contributor to that project and I'll set it up for you (mpetuska on github)

[Sourabh Rawat]

right. This was generated by IDEA.

[Sourabh Rawat]

Added you

[Sourabh Rawat]

I think IDEA should generate README as well. 😂

[Big Chungus]

Here you go

[Big Chungus]

Left a readme with brief summary

[Sourabh Rawat]

thanks a lot. This looks better than the initial IDEA generated structure.

[Sourabh Rawat]

It seems like 2nd and 3rd steps sometimes works, sometimes doesnt. So when I change something in welcome.kt(React component), then it will rebuild, but on refreshing it won't show the update most of the time.

[Big Chungus]

They're not as quick (depending how much you change)

[Sourabh Rawat]

I am change a string from hello to hello2.....

[Big Chungus]

Essentially you should run steps 1 and 2 or 3 (but not both)

[Sourabh Rawat]

yups i tried with 1 and 2 or 1 and 3

[Big Chungus]

because 2 clashes with 3

[Big Chungus]

Odd

[Sourabh Rawat]

have you tried in your local ?

[Big Chungus]

I'd say run steps 1 & 3 and work on port 3000

[Big Chungus]

Webpack will refresh the browser for you itself

[Big Chungus]

I did, haven't had any issues

[Sourabh Rawat]

hmm let me clean and run again 1 and 3

[Sourabh Rawat]

Nopes, isn't working.
Terminal1: ran ./gradlew run
Terminal2: ran ./gradlew classes frontendBrowserDevelopmentRun -t
Changed hello to hello2 in welcome.kt
No automatic refresh in browser
On manual refresh no changes visible

[Sourabh Rawat]

Browser: Edge Chromimium
OS: Windows10

[Big Chungus]

Loks like webpack dev server is not being installed when running devServer...

[Big Chungus]

Try ./gradlew build

[Big Chungus]

And then steps 1 & 3

[Big Chungus]

Just pushed an update (forgot a tiny piece of devServer config)

[Big Chungus]

So after checkingOut do:
1. ./gradlew clean build
2. ./gradlew run
3. ./gradlew classes browserDevelopmentRun -t

[Sourabh Rawat]

Right. I also was checking and found out that main.js in build/distrubition wasn't getting updated. It only updated after clean build

[Big Chungus]

It doesn't need to

[Big Chungus]

I've fixed it in my last commit

[Big Chungus]

before only prodWebpack had a rule to rename output file, now all webpack tasks do

[Sourabh Rawat]

So if I understand correctly, your fix will make all KotlinWebpack tasks change the outputFileName.

[Big Chungus]

Yes, instead on only prod

[Big Chungus]

Because index.html file expects the js file to be named main.js

[Sourabh Rawat]

Wish there were docs on these stuff. Cuz the user has to configure them in the end...

[Big Chungus]

Yep, took me ages and lots of help here from the community to figure all of this out

[Sourabh Rawat]

It is working properly now. Thanks a lot!

[Big Chungus]

I've pushed another commit to fix the final issue with using this only via steps 1 & 2. Also added shadow plugin to produce a fat (executable) jar for you

[Sourabh Rawat]

1+2 does not work always. So ill probably use 1+3

[Big Chungus]

Odd... Couldn break 1&2 on my end. Anyways, 1&3 is much faster reload