Using code-server to test out frontend code?

[Blakeinstein]

Trying to implement something like code sandbox. Is it possible to have a start command that runs on page load? Something like npm i. And also show a simple browser at a particular port as well?

[jsjoeio]

Hmmm...I don't think we have a hook but you might be able to add something to your settings to run a script that runs npm i and opens a new tab in the browser 🤔

If I were to try to implement, something like:

1. Add to settings to run script when terminal opens (link)
   1. script runs npm i at root
   2. then it runs npm start
   3. then it opens up localhost:<port> in browser (open)

Would that work?

[jsjoeio]

Ah, yes. This is known issue with code-server + React. You have to change a few things when you run a React app. Here's a link to the docs. Let me know if you run into issues!

[Blakeinstein]

Interesting! Would it possible to setup a subdomain config in the docker + heroku setup? Or should I try a vm approach instead?

[jsjoeio]

Would it possible to setup a subdomain config in the docker + heroku setup

Hmm 🤔 I'm not sure. @bpmct might know about. He wrote a fantastic summary about VM vs. Container considerations: https://github.com/cdr/deploy-code-server#code-server-on-a-vm-vs-a-container

[Blakeinstein]

I got the proxy part working, but Looks like hot reload would be an issue. Any bundlers than can support heroku?

Is it possible to run multiple code-server sessions using the same config but seperate github repo?

[jsjoeio]

I got the proxy part working

awesome!

Any bundlers than can support heroku?

Hmm 🤔 I'm not sure. You mean like a bundler (like Parcel) that supports working with Heroku? I guess I'm not sure on what you're looking for. I thought hot reload should just work (haven't tested with CRA or Next).

Is it possible to run multiple code-server sessions using the same config but seperate github repo?

Hmmm... I think you could deploy multiple code-server instances and have them all point to the same github repo, is that what you mean?

[Blakeinstein]

Quiet a lot got lost in translation haha. Anyways, I should have elaborated better. You see most bundlers have web sockets open to the port the dev server is running on. So for example, the bundler that I am using... vite.. would run the dev server at some port lets say 1234. Now, the webpage would be viewable on app.heroku.com/proxy/1234 but accessing the web socket for hot reloading wont be possible with this proxying... because the dev server would try to connect to app.heroku.com:1234/proxy/1234. I solved this by a VM approach. skip the second thing for now since I also resolved that with the VM approach. Are there any extensions that can let me run custom JS code on the vscode session, to possible communicate with a third party server? Or should I just write bash scripts as part of the docker image. I know this is a bit too much, and I am going way beyond the scope of the project and I apologise for that. Its quite nice of you guys for having the project open source!

…

On Thu, Jul 29, 2021, 12:14 AM Joe Previte ***@***.***> wrote: I got the proxy part working awesome! Any bundlers than can support heroku? Hmm 🤔 I'm not sure. You mean like a bundler (like Parcel) that supports working with Heroku? I guess I'm not sure on what you're looking for. I thought hot reload *should* just work (haven't tested with CRA or Next). Is it possible to run multiple code-server sessions using the same config but seperate github repo? Hmmm... I think you could deploy multiple code-server instances and have them all point to the same github repo, is that what you mean? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3836 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKCCJRTTYXLA6HC6TCUD4CTT2BFZHANCNFSM5A2BCSPA> .

[jsjoeio]

You see most bundlers have web sockets open to the port the dev server is
running on. So for example, the bundler that I am using... vite.. would run
the dev server at some port lets say 1234. Now, the webpage would be
viewable on app.heroku.com/proxy/1234 but accessing the web socket for hot
reloading wont be possible with this proxying... because the dev server
would try to connect to app.heroku.com:1234/proxy/1234

TIL! I have worked with other bundlers but the hot reloading I always chalk up to the "magic black box". Sorry for the misunderstanding!

Are there any extensions that can let me run custom JS code on the vscode
session, to possible communicate with a third party server?

Hmm 🤔 I think I am feeling a bit dense here and need a specific example, even one that I can run locally on code-server, to be able to help.

So as you pointed out the bundler, like vite, is going to point to the wrong endpoint by default. It looks like you can configure it though to point elsewhere. Did you already try that?

https://vitejs.dev/config/#server-proxy

[Blakeinstein]

Yes I did that. Just intended to abstract that out for a probably end user. You can find the project here.
The backend logic is still under todo https://github.com/Blakeinstein/codeserver-live. The template I am using is available here https://github.com/Blakeinstein/codeserver-react-template

[jsjoeio]

This is a really interesting problem 🤔 I hate to ask for more work from you, but what if you recorded a video and walked through a demo of how it works now, and then showed the problem with the dynamic ports issue?

And I'm assuming you're already doing this, but for an MVP, seems like using a specific port could work and later we could figure out how to make it dynamic?

For me, I work best when I have a specific example so the video would help a lot! This is a really neat project so hoping we can figure it out 🤞

[Blakeinstein]

I actually have an MVP that is hardcoded to use `/proxy/8081`. The project is available here, https://github.com/Blakeinstein/codeserver-live/. I am actually a bit busy this week, but should be able to share a video afterwards. Meanwhile, you can test out the project if you want.

[jsjoeio]

If it didn't use Docker, I would try it out in a heartbeat! Unfortunately, I don't have the bandwidth or environment set up to test this out. But if you make progress, let me know!

[Blakeinstein]

I was thinking if having an extension that gitpod uses internally, (it is open source) would help with this?

[jsjoeio]

Possibly! We are working on some updates to code-server link which should solve this though. Let us know if you want to test it out!

cc @bpmct

[Blakeinstein]

I would love to do so!