My friend cannot join the same game with me

[Kesb1]

My friend cannot join the same game with me, I cannot click start.

[Arp-G]

Could you please explain a bit, what errors your friends get when they try to join?
A screenshot of the error would also help.

You should first create a game and then share the invite link with your friend.

[pcapazzi]

Hi. Trying to get this to run. Started a clean linode instance of ubuntu 22.04 LTS. Ran an apt update and apt upgrade and rebooted. Installed docker and docker-compose. Added my ID and assigned myself to the docker group. Cloned the github and executed the job. Took a little while but it's running. From the front end when I try to create a game it says something went wrong with creating a user session. I've tried this on both a laptop and my phone with the same results.

Seriously... looks great at the start... hoping to get this working. Thanks!

[Arp-G]

Hi @pcapazzi thanks for trying out the project, I will try to help you to get it running.

From the error, it seems the front end is not able to talk to the backend server properly.

The steps given in the README file are actually for running the app locally, to run it on a server environment we need to do some additional stuff.

When you hit docker-compose up the app runs two servers a backend phoenix web server at port 4000 and a front-end react js server at port 3000. Make sure you expose both these ports on your Linode instance.

Next, it requires a few environment variables to run properly

• Go to the file pictionary-app/src/helpers/api.js
  and replace the lines

  export const SITE_URL = process.env.REACT_APP_SITE_URL || 'http://localhost:4000';
  export const HOST_URL = process.env.REACT_APP_HOST_URL || 'http://localhost:3000';
  

  with your Linode server URLs, for example, if your server domain name is 'abc.com'

  export const SITE_URL = https://abc.com:4000;
  export const HOST_URL = https://abc.com:3000;
  

• Go to the file lib/pictionary_web/endpoint.ex and on line 51 make sure you add your servers domain name to the list, for example
  origins: ["http://localhost:3000", "http://localhost:5000", https://abc.com:3000]

• After this try running docker-compose down && docker-compose build --no-cache && docker-compose up

This is not the most ideal way of doing it, but it should get you running, we can hop on a call if you face issues and need further assistance regarding this.

[pcapazzi]

Thanks for getting back to me. I tried it out and still got the same error. I'll try it again though. I don't have a domain name so I used the actual IP in it's place. I don't think port 3000 or 4000 is an issue as I was able to get to the app using 3000 without changing anything so I believe 4000 is open too. I'll re-download it and stick with the Docker implementation. I tried going the manual route but I had used npm audit fix which may have broken it. Thanks.

…

On Fri, Oct 14, 2022 at 12:50 PM Arpan Ghoshal ***@***.***> wrote: Hi @pcapazzi <https://github.com/pcapazzi> thanks for trying out the project, I will try to help you to get it running. From the error, it seems the front end is not able to talk to the backend server properly. The steps given in the README file are actually for running the app locally, to run it on a server environment we need to do some additional stuff. When you hit docker-compose up the app runs two servers a backend phoenix web server at port 4000 and a front-end react js server at port 3000. Make sure you expose both these ports on your Linode instance. Next, it requires a few environment variables to run properly - Go to the file pictionary-app/src/helpers/api.js and replace the lines export const SITE_URL = process.env.REACT_APP_SITE_URL || 'http://localhost:4000'; export const HOST_URL = process.env.REACT_APP_HOST_URL || 'http://localhost:3000'; with your Linode server URLs, for example, if your server domain name is 'abc.com' export const SITE_URL = https://abc.com:4000; export const HOST_URL = https://abc.com:3000; - Go to the file lib/pictionary_web/endpoint.ex and on line 51 make sure you add your servers domain name to the list, for example origins: ["http://localhost:3000", "http://localhost:5000", https://abc.com:3000] - After this try running docker-compose down && docker-compose build --no-cache && docker-compose up This is not the most ideal way of doing it, but it should get you running, we can hop on a call if you face issues and need further assistance regarding this. — Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADBKGDBA5MX2AXTEX3H5MATWDGFNTANCNFSM54X6QKPA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pcapazzi]

That worked. Desktops run it. There is an error on mobile Chrome on iOS but I doubt it’s designed for that. Trying to get this running for some kicks with co-workers. It’s an impressive app! How long did it take you to put this together? How many packages are involved?

…

Sent from my iPhone

On Oct 14, 2022, at 2:16 PM, Peter Capazzi ***@***.***> wrote:  Thanks for getting back to me. I tried it out and still got the same error. I'll try it again though. I don't have a domain name so I used the actual IP in it's place. I don't think port 3000 or 4000 is an issue as I was able to get to the app using 3000 without changing anything so I believe 4000 is open too. I'll re-download it and stick with the Docker implementation. I tried going the manual route but I had used npm audit fix which may have broken it. Thanks. > On Fri, Oct 14, 2022 at 12:50 PM Arpan Ghoshal ***@***.***> wrote: > Hi @pcapazzi thanks for trying out the project, I will try to help you to get it running. > > From the error, it seems the front end is not able to talk to the backend server properly. > > The steps given in the README file are actually for running the app locally, to run it on a server environment we need to do some additional stuff. > > When you hit docker-compose up the app runs two servers a backend phoenix web server at port 4000 and a front-end react js server at port 3000. Make sure you expose both these ports on your Linode instance. > > Next, it requires a few environment variables to run properly > > Go to the file pictionary-app/src/helpers/api.js > and replace the lines > > export const SITE_URL = process.env.REACT_APP_SITE_URL || 'http://localhost:4000'; > export const HOST_URL = process.env.REACT_APP_HOST_URL || 'http://localhost:3000'; > with your Linode server URLs, for example, if your server domain name is 'abc.com' > > export const SITE_URL = https://abc.com:4000; > export const HOST_URL = https://abc.com:3000; > Go to the file lib/pictionary_web/endpoint.ex and on line 51 make sure you add your servers domain name to the list, for example > origins: ["http://localhost:3000", "http://localhost:5000", https://abc.com:3000] > > After this try running docker-compose down && docker-compose build --no-cache && docker-compose up > > This is not the most ideal way of doing it, but it should get you running, we can hop on a call if you face issues and need further assistance regarding this. > > — > Reply to this email directly, view it on GitHub, or unsubscribe. > You are receiving this because you were mentioned.

[pcapazzi]

So it works with an IP address put for a domain name I think I need to use LetsEncrypt. In docker-compose.yml can I add ports 80 and 443 and point them to 3000? Change from ports: - 3000:3000 To: ports: - 80:3000 - 443:3000 LetsEncrypt (going the easy way...) needs port 80 to respond. Not to mention it'd be easier on my co-workers to just use the domain name. On Fri, Oct 14, 2022 at 3:10 PM Peter Capazzi ***@***.***> wrote:

…

That worked. Desktops run it. There is an error on mobile Chrome on iOS but I doubt it’s designed for that. Trying to get this running for some kicks with co-workers. It’s an impressive app! How long did it take you to put this together? How many packages are involved? Sent from my iPhone On Oct 14, 2022, at 2:16 PM, Peter Capazzi ***@***.***> wrote:  Thanks for getting back to me. I tried it out and still got the same error. I'll try it again though. I don't have a domain name so I used the actual IP in it's place. I don't think port 3000 or 4000 is an issue as I was able to get to the app using 3000 without changing anything so I believe 4000 is open too. I'll re-download it and stick with the Docker implementation. I tried going the manual route but I had used npm audit fix which may have broken it. Thanks. On Fri, Oct 14, 2022 at 12:50 PM Arpan Ghoshal ***@***.***> wrote: > Hi @pcapazzi <https://github.com/pcapazzi> thanks for trying out the > project, I will try to help you to get it running. > > From the error, it seems the front end is not able to talk to the backend > server properly. > > The steps given in the README file are actually for running the app > locally, to run it on a server environment we need to do some additional > stuff. > > When you hit docker-compose up the app runs two servers a backend phoenix > web server at port 4000 and a front-end react js server at port 3000. Make > sure you expose both these ports on your Linode instance. > > Next, it requires a few environment variables to run properly > > - > > Go to the file pictionary-app/src/helpers/api.js > and replace the lines > > export const SITE_URL = process.env.REACT_APP_SITE_URL || 'http://localhost:4000'; > export const HOST_URL = process.env.REACT_APP_HOST_URL || 'http://localhost:3000'; > > with your Linode server URLs, for example, if your server domain name > is 'abc.com' > > export const SITE_URL = https://abc.com:4000; > export const HOST_URL = https://abc.com:3000; > > - > > Go to the file lib/pictionary_web/endpoint.ex and on line 51 make > sure you add your servers domain name to the list, for example > origins: ["http://localhost:3000", "http://localhost:5000", > https://abc.com:3000] > - > > After this try running docker-compose down && docker-compose build > --no-cache && docker-compose up > > This is not the most ideal way of doing it, but it should get you > running, we can hop on a call if you face issues and need further > assistance regarding this. > > — > Reply to this email directly, view it on GitHub > <#4 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/ADBKGDBA5MX2AXTEX3H5MATWDGFNTANCNFSM54X6QKPA> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[Arp-G]

Glad to know it worked for you.

How long did it take you to put this together?

It took me 3 months to build it from scratch(backend + frontend), and I only worked on it on weekends. It was a side project, mainly to explore interesting stuff in elixir and revise React js and in the process build something fun.

How many packages are involved?

The backend is pretty lean, not many dependencies

On the frontend, I have used a few external packages but not too many (around 20)

---

The changes you made to the ports on docker compose makes sense to me, if that works for you go ahead with it.

The docker and docker-compose files I added were actually meant for running locally and starting the server in development mode. Using this docker setup for productions should be fine for small-scale usage, I will try to come up with a proper deployment setup for production and an updated readme for this project when I get some time.