Getting create-react-app/Gatsby.js dev server to work

[tcaraher]

Hi everyone,

Possible noob question here but would love some help if anyone has a sec! I’m still very much in the early stages of learning and fear I’m a little over my head!

I have my code-server running just fine on my ipad - with google cloud on my custom domain, using nginx and lets encrypt etc... I used this tutorial in case anyone is wondering. It set up some extras(boots automatically...) and stuff as well.

Anyway I was delighted to get it working, although didn’t anticipate opening up another port for the dev server to be such a challenge (Gatsby defaults to 8000 - which also has a graphiql interface at :8000/___graphql - we wont worry about that for the moment, and create-react-app at 3000 - the specifics don’t matter). I have attempted to get code-servers’ built in proxy to work, although I’m having no luck. I have added A records for 8000.mydomain.com, issued certbot, and added the —proxy-domain flag in my ExecStart line in my code-server.service file. Here is that line -

ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password —-proxy-domain example.com

Was I on the right track here or wayyy off?

Just a note - I am aware of this issue, which indicates that this wont work for me anyway at the moment - but frankly I haven’t even gotten that far. I’d love to be only seeing my index.html! Haha.

Also I have attempted a couple (possible waste of time) things that may work?- Instead of using the built in reverse proxy at all, would just using nginx to point to the ports I want work? I have been reading the nginx docs to try and figure this out but am stumped. My initial instinct was to just to add the following to my nginx file, which didn’t work -

location /8000 {
      proxy_pass http://localhost:8000/;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
}

Again am I on the right track?

Any clues/feedback would be wonderful. I feel a little over my head here but trying to work it out.

Thanks!

[tcaraher]

Actually got it I think!

I tried setting up another nginx server file for the 8000 port pointing at 8000.example.com, and during that process I issued a certbot cert for it which seemed to install just fine. But still couldn’t access it - probably a problem with my syntax in the nginx file(I did set up a symlink to sites enabled etc...). But after giving up on this approach I removed the files, but it was still pointing to the default nginx placeholder when loading the page. I could understand this...

So I rooted around the sites-available/default file for nginx and discovered that certbot inserted a section for the new url there - just with the Location / section pointing at nothing. So first tried localhost:8000 - nope. Then 127.0.0.1:8000 and bam! Works! Although the built in auth isn’t working - not surprisingly I guess? I then wrapped my application in its own auth so that’ll do for now I think.

There is very likely a more elegant way of doing this but my stumbling around has it working fine.

Still open for feedback on this anyway! Thanks

[travisboss]

I posted a similar issue with access via the port and yes mine is accessed just like yours 8000.code-server.<website-url>.com. What I did since I use a pihole is I have split dns setup to go to the local port of my code-server url, but I also setup a cname .code-server.<website-url>.com this is a wildcard so I do not need to create one for each port now. Make sense?

https://github.com/linuxserver/reverse-proxy-confs/blob/master/code-server.subdomain.conf.sample

This is the proxy config I am using through swag.