General Questions

[dude83759]

Hello Sir, I found your clone very helpful but I want some help regarding installation, how can I contact you, please provide mail address or if linkedin account link.

[sentrionic]

What problem did you encounter during the process? We can talk about it here for others to see that might have similar problems.

[dude83759]

Not any specific problem. Actually I am a beginner so I am not much experienced with all this stuff. So I required detailed steps to clone your repo and achieve discord clone. Also will this discord clone chat work on a PHP website. If possible please connect on dude83759@gmail.com

[dude83759]

I didn't tried installing this clone and working on it, should I do as defined in readme and also is AWS a must for uploading files or there is some free service for that or how to do that on localhost.

[sentrionic]

You should follow the steps in the readme. If you don't have NodeJS yet, you should install that as well. You could replace the yarn command with npm in that case.

AWS is required for file upload. You can definitely replace it with something like https://cloudinary.com/, though you would have to change the file upload part yourself in that case.

I don't know what you mean with a PHP website so I can't help you with that.

[dude83759]

Thanks a ton for your reply. Okay, I will follow the steps in the readme and reach out to you for any queries. I would have been glad if I can contact you somewhere else because here it might be that you are not always active on Github.
.....
Coming to NodeJS I have to installed it earlier for another project and so should I replace yarn commands with npm and will they work. Actually for what is yarn command used?

With PHP website I meant that I made a dynamic website with PHP for a project where users can login, so after that they can chat (like discord).

So will this be totally seperate or how will I integrate that users database for login into chat with this one.

[dude83759]

Also do you have any experience with WebRTC? Looking forward to hearing from you soon!

[sentrionic]

Yarn is a dependency manager similar to npm.

The frontend and backend are separate entities, so you could use a different frontend or backend. You would just have to call the endpoints listed on localhost:4000/api. I've never used PHP so I can't help you any further with that.
Similarly I haven't used WebRTC either.

[dude83759]

Okay, I will try to do my best, if I encounter any error, would ask you.

[dude83759]

Just one more thing, is your repo up to date with your demo website https://valkyrieapp.xyz/

[dude83759]

Also sir, it is given that redis is not available officially for windows.

[sentrionic]

Yes

[dude83759]

you responded - Yes for which question ?

[sentrionic]

The live version is up to date with the repository. As for Redis you would need to search for different solutions to run it on Windows, for example by using Docker.

[dude83759]

The live version is up to date with the repository. As for Redis you would need to search for different solutions to run it on Windows, for example by using Docker.

Okay

[dude83759]

What about this https://redislabs.com/blog/redis-on-windows-10/

[dude83759]

Also would this work for your repo https://divyanshushekhar.com/how-to-install-redis-on-windows-10/

[sentrionic]

You can give both a shot, I would try the first one since it's provided by the redis devs themselves.

[dude83759]

Okay, then I will try the 1st one and let you know.

You can give both a shot, I would try the first one since it's provided by the redis devs themselves.

[dude83759]

Just asking for a personal choice, won't the first option be difficult and take too much time than the second. If the results will be the same I would go for 2nd. What do you say?

[dude83759]

I am going with WSL 1 because WSL 2 seems to be lengthy and tougher than WSL 1

[dude83759]

How to get these values ---

DATABASE_URL="postgresql://:@localhost:5432/db_name"
REDIS_URL=localhost:6379
CORS_ORIGIN=http://localhost:3000
SECRET=SUPERSECRET
REDIS_HOST=192.168.2.123
REDIS_PORT=6379
REDIS_PASSWORD=password

[dude83759]

Hello Sir,

Here is what I did but still the project is not working on my localhost.

• I installed postgresql and created a new db by command create database databasename; in psql.
• Installed redis on windows on WSL 1 as descirbed here https://redislabs.com/blog/redis-on-windows-10/
• installed yarn with npm install --global yarn
• run yarn install to install dependencies
• Renamed .env.example to .env and fill in the values

DATABASE_URL="postgresql://:@localhost:5432/db_name" //here I entered my values
REDIS_URL=localhost:6379
CORS_ORIGIN=http://localhost:3000
SECRET=SUPERSECRET
REDIS_HOST=192.168.2.123
REDIS_PORT=6379
REDIS_PASSWORD=password

Didn't executed AWS part.

then on web 

- run `yarn install `

- copied .env from server to web

- run `yarn start `
- and went to localhost:3000 but nothing happened 
went to localhost:4000 ... home page of the project was visible but registration didn't worked.

Please help me troubleshoot, where did it went wrong.

[dude83759]

Please help @sentrionic

[dude83759]

@sentrionic Sir please reply I have tried everything but still it's not working.

[dude83759]

in my server folder when I open cmd and run yarn start I get the error unable to connect the databse the server does not support ssl connections and tried all stackoverflow solutions but none worked for me, please help.

[sentrionic]

There's not much help I can remote provide either. My only guess would be to remove

extra: {
  ssl: {
    rejectUnauthorized: false,
  },
},
ssl: true,

in database.ts

[dude83759]

There's not much help I can remote provide either. My only guess would be to remove

extra: {
  ssl: {
    rejectUnauthorized: false,
  },
},
ssl: true,

in database.ts

Okay will try that but sir, I have been waiting for your reply for hours. Is there some communication method where we can have instant communication. Also if you agree I will be ready for a MS teams meeting or Google meet meeting.

[dude83759]

Also @sentrionic as I mentioned what I did, did you find any other mistakes in what steps I followed, please let me know.

[sentrionic]

Did you insert your postgres username and password in your DATABASE_URL?
The REDIS_HOST should be localhost as well, I made a mistake in the readme there while copying.

[dude83759]

Did you insert your postgres username and password in your DATABASE_URL?
The REDIS_HOST should be localhost as well, I made a mistake in the readme there while copying.

Yes I inserted my username and password in DATABASE_URL in the .env file in server and copied that same file to web.

also REDIS_HOST ==localhost
just now removed this

extra: {
  ssl: {
    rejectUnauthorized: false,
  },
},
ssl: true,

still getting the error below.

[sentrionic]

Web uses a different .env file that should only contain REACT_APP_API=http://localhost:4000.
As I said previously remote help is very difficult. You could try to create a different node and express project
with TypeORM and see if you can connect to your database there.

[dude83759]

Hey, thanks, finally I am not getting the error but still my localhost:3000 doesn't load anything and localhost:4000 does load like yours https://api.valkyrieapp.xyz/ and localhost:4000/ws loads same as yours https://api.valkyrieapp.xyz/ws/.

I am also having a nodejs application that runs on port 3000, so is that the cause of not loading localhost:3000

[sentrionic]

If your client does not run on port 3000 then you need to change CORS_ORIGIN to the port it runs on.
What error do you get on your client?

[dude83759]

Sir, I request you to please upload a step-by-step video guideline to make this project, please sir.

[dude83759]

For beginners, it's too difficult too troubleshoot, by the way thanks a ton, you helped me with every error I encountered but still on localhost:4001 the application displays, I enter the details to register and when I click on register nothing happens.

[sentrionic]

Beginners should probably follow tutorials first to get into React development with custom backends or try not to mess with the different ports too much.

If you press F12 you can open the developer console of your browser and then check if there are errors either in the console or network tab. If you run the server on a different port don't forget to change the REACT_APP_API to said port.

[dude83759]

Sir, one very important request. It might take you some time but please please clone this repo yourself and do the steps again as you mentioned in the readme. then please let me know if you are able to install without any problem.

[dude83759]

Beginners should probably follow tutorials first to get into React development with custom backends or try not to mess with the different ports too much.

If you press F12 you can open the developer console of your browser and then check if there are errors either in the console or network tab. If you run the server on a different port don't forget to change the REACT_APP_API to said port.

Sure!

[dude83759]

[sentrionic]

You client runs on 4001 right? Your backend uses another port, that's the one that you need to specify in the env variable.

[dude83759]

Now what to do???

values of server .env
PORT=3000
REDIS_URL=localhost:6379
CORS_ORIGIN=http://localhost:3000
SECRET=supersecret

REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=

vlaue of web .env.development
browser=none
REACT_APP_API=http://localhost:3000

[dude83759]

Now after this if I open localhost:3000 it opens swagger UI, if I open localhost:3000/ws/ it opens Valkyrie websockets.

if I open 192.168.1.7:3000 it does open valkyrie but clicking on registration does nothing.

[dude83759]

Hey, thanks a ton, finally I am able to register, login, create server, add users, make friends, notification system working, create channel (Private also), get notified about online/offline, get notified about who's typing in the channel.

How can I add the option of user typing.... in direct messaging. Also user avatar didn't changed when I uploaded one and file upload didn't worked.

is it that for both of them I will require AWS S3.

Again, thanks a lot for this amazing project and helping me resolve all my enquiries, it's much appreciated would look to collaborate soon with you for this or any project in future.

Now coming to how did I solved my error, I think it was already solved because when I was solving error for connection to database somehow i might have changed ports, now after changing correct ports for hours, being frustrated I saw ports for your git repo and changed them in mine local project and it worked.

[dude83759]

when using the project on localhost couldn't I simply save images in the project folder, because I am not going to deploy this online so AWS S3 seems a 2nd option. Please let me know.

[sentrionic]

You can store files to your local device and serve them yes. Since I have an AWS account I haven't used that option in a long time and therefore can't really remember how it worked.

As for user typing in DMs, that might be something I forgot to add.

[dude83759]

Yeah, pardon me the user is typing .... is working on both direct messages and channel messages on server.
Coming to storage I am going to try AWS and let you know what happens, do I just have to change
AWS_ACCESS_KEY=ACCESS_KEY
AWS_SECRET_ACCESS_KEY=SECRET_ACCESS_KEY
AWS_STORAGE_BUCKET_NAME=STORAGE_BUCKET_NAME
AWS_S3_REGION=S3_REGION
GMAIL_USER=GMAIL_USER
GMAIL_PASSWORD=GMAIL_PASSWORD

also where we are having mails and why?
for OTP or what?
Also, coming to removing a friend it works fine on your demo website but on my local storage I am able to remove friend from friends section but when I click friend on right side bar (where user are shows offline/online) it gives a error page but friend is removed please help me correct that.

Also talking about what functions of the repo are wroking on localhost are ___

Message, Channel, Server CRUD --- yes
Authentication using Express Sessions --- don't know what exactly is this but seems yes (if possible please explain)
Channel / Websocket Member Protection --- don't know what exactly is this but seems yes (if possible please explain)
Realtime Events --- yes events like adding friend, message, crud operations happens in real time
File Upload (Avatar, Icon, Messages) to S3 -- going to try this
Direct Messaging - yes
Private Channels - yes
Friend System - yes
Notification System - yes (would like to get notified about channel messages like we get notified about direct messages)
Basic Moderation for the guild owner (delete messages, kick & ban members) -- yes
(Basically 2015 Discord features with 2021 Look) --- yes

in all, it's a fantastic repo.

Would you please help me add emoji part in the chat, would be glad to hear from you soon!

Screenshots for remove friend error (by right clicking on the friend in the right side bar )
Unhandled Rejection (TypeError): Cannot read property 'filter' of undefined

[dude83759]

For specific personalized conversation we may use https://gitter.im/ (login with GitHub).

[sentrionic]

• Emails are for resetting passwords, if you aren't interested in that you can skip that.
• Express Sessions are a way to authenticate the user. If you have used JWT, sessions are similar to that.
• Channel/Websocket Protection means that non authenticated users and users that are not members of that guild/channel can't subscribe to those events.
• As for that error I will it out later.

As for new features I have currently no interest in adding new stuff. If you want emoji take a look at Emoji Mart.
The only reason I didn't add it is that if I want to create a mobile app I can't use those emotes.

[dude83759]

• Emails are for resetting passwords, if you aren't interested in that you can skip that.
• Express Sessions are a way to authenticate the user. If you have used JWT, sessions are similar to that.
• Channel/Websocket Protection means that non authenticated users and users that are not members of that guild/channel can't subscribe to those events.
• As for that error I will it out later.

As for new features I have currently no interest in adding new stuff. If you want emoji take a look at Emoji Mart.
The only reason I didn't add it is that if I want to create a mobile app I can't use those emotes.

Thanks!

[dude83759]

If I am not disturbing you then will you please take some time out from your schedule tasks for the following.

I have a mini web app which already has a login/register (DB used --> MySQL).

Now I want to integrate this chat on that mini web-app.

I want that if I login & click on chat option this discord chat opens for that registered user without asking again for the username and password for both login and register.

Will I have to connect mysql and postgresql and fetch table entries from 1st to 2nd and while clicking on chat run an api to take values for user log-in automatically.

[sentrionic]

That is out of scope of my knowledge, all my projects have been monolithic using the same database and Redis instances.

[dude83759]

That is out of scope of my knowledge, all my projects have been monolithic using the same database and Redis instances.

Okay, no problem.

[dude83759]

How are you handling register/login in this, I mean what files should I look for?

[dude83759]

Also please tell about file upload using cloudinary, what files would I have to change?

[sentrionic]

Authentication is in the user directory on the server side and auth.ts on the client side. You would have to change stuff in fileUtils.ts to replace AWS with Cloudinary.

[dude83759]

Authentication is in the user directory on the server side and auth.ts on the client side. You would have to change stuff in fileUtils.ts to replace AWS with Cloudinary.

Okay, will try that.

[dude83759]

Sir, please help me with file upload on localhost.

[sentrionic]

Look into something like that

[dude83759]

Hello Sir, how can I change the logo here, please tell me the file.

[itsbek]

hey there, it's really awesome build!
NestJs is totally new world to me and Node itself at some point.

I have followed the steps in the Readme and deployed the backend to heroku and frontend to Netlify. Set all the AWS, postgres and redis credentials in the config vars in the Heroku side accordingly.

But when I try to register it throws me back to the login page after registering successfully.
login page takes me in for about 2 seconds and routes back to login page again. The error message on the console as follows:

if my guess is right, redis is not caching sessionID/userID and storing it in the cookies, right?
is that possible that, redis add on heroku not connected properly?

but, I'm getting the 403 forbidden on the heroku logs as well
2021-04-10T12:25:15.219454+00:00 heroku[router]: at=info method=GET path="/api/guilds" host=myAppURL.herokuapp.com request_id=47af8e45-9f42-4f08-b9d4-2d73362fc895 fwd="84.54.77.97" dyno=web.1 connect=0ms service=9ms status=403 bytes=1024 protocol=https

I would appreciate your opinion and any guide on this. Also, planning to develop the build any further? like confirm email on register; signup via google/facebook/ etc?

thanks a lot, it was a great learning curve!

[sentrionic]

@dude83759 Check out HomeIcon.tsx. You will need to replace it with a SVG.

[sentrionic]

@itsbek My first guess is that you aren't using the same domain name for your backend and frontend.
After login does the browser have the cookie set? You will also need to change the domain in sessionmiddleware.ts .

Currently no interest in adding any new features, I would be more interested in performance improvements first.

[itsbek]

@itsbek My first guess is that you aren't using the same domain name for your backend and frontend.
After login does the browser have the cookie set? You will also need to change the domain in sessionmiddleware.ts .

• I've set domain in sessionMiddleware to my custom one
• could you please elaborate more on your 1st statement?

in the backend, heroku set the domain under the created app name. ex. myapp.herokuapp.com
and in the frontend(Netlify), I've set the REACT_APP_API = myapp.herokuapp.com accordingly

and finally, I have changed randomly generated domain name by Netlify to my own ex. mycustomdomain.com ~ in the backend CORS_ORIGIN = mycustomdomain.com

[itsbek]

Currently no interest in adding any new features, I would be more interested in performance improvements first.

I loved the architecture and how clean the code is, I would be delighted to add some value on the build if I could! Although, it's smth new to me, I'm ready to take a chance and help you. of course under your guidance

[sentrionic]

I believe a requirement for Express Sessions is that it has to use the same domain name, so your backend needs to have a variation of mycustomdomain.com as well.

I used Ben Awad's video for the deployment, maybe it might help you as well.

As for checking if your cookie is set, I meant this:

As for your other post, of course you can try adding features to your build. I'm currently working on a mobile app so every new feature means more work there as well. So until I'm done with the app I'm trying to keep new stuff to a minimum.

[itsbek]

yeah I just noticed that i missed domain/subdomain step and also, my cookies are empty and I guess cuz of dns settings as well
thanks for the link, I was just watching his this
tutorial

great, if you're using React Native on that, I am here to help with anything I can

[sentrionic]

I'm actually using Flutter for the app since I prefer the UI Kit and DX there and it seems to have some more jobs here.
I do know that using React Native would have allowed me to reuse a lot of the logic.

[dude83759]

@sentrionic Sir, you have always been very helpful with all my queries, I would request you if possible and if your schedule time allows you to get some free time to add instructions on how to use file upload on localhost.

[itsbek]

I'm actually using Flutter for the app since I prefer the UI Kit and DX there and it seems to have some more jobs here.
I do know that using React Native would have allowed me to reuse a lot of the logic.

cool, all the best! will definitely check that out

[dude83759]

@itsbek did you tried serving files on localhost, would like to know that?

[itsbek]

I have changed the dns settings, however need to wait till it propagates... perhaps, I am still missing something on dns configuration.
cuz I still get the same errors for now....
could you run on setting the dns in your case please? If I'm not mistaken you have used Netlify, Heroku and Namecheap is in your build too right?

[itsbek]

@dude83759 what do you mean?

[dude83759]

@dude83759 what do you mean?

Hey, I mean that how are you using file upload feature of the chat, probably AWS... I am looking to upload files to localhost and display them by localhost itself.

[itsbek]

ahh that one, that feature is disabled - if I am not mistaken to avoid spam which would also cost for storing in S3 but that's only in production. so if you running the start:prod then you need to enable it. remove the disable variable in the web>components>layouts>guilds>chat

but setting up the local storage is not clear to me cuz I didn't dig up on that, just google it and you need to replace the aws S3 paths with your local storage

[sentrionic]

My current DNS are:
Namecheap:

Heroku:

I'm using a paid version of Heroku so I also get the ssl, maybe you are missing that.

[itsbek]

right! that should be the cause.
hobby tier will do the job?

[sentrionic]

I'm using hobby tier yes.
You could also try setting Cloudflare in front of the backend to get free ssl, but I'm not sure if that will work with the sessions.

[itsbek]

just upgraded to hobby tier as well, but netlify app has an ip address?

[sentrionic]

It does, I think it's in the domain settings. It should have one like it's shown in Ben's video with Vercel.

[itsbek]

looked up for it, apparently it's Netlify’s load balancer IP address 104.198.14.52
however, it's different in the current apex domain
shall I set it to the 104.198.14.52 or 75.2.60.5, that's interesting...

[sentrionic]

I actually can't remember all the steps I took I'm afraid.
I would try it with the 104.198.14.52 option since it's the one I'm currently using.

[itsbek]

my dns settings and status are just like yours all over the platforms - to my own addresses of course
however, the site is insecure when opened
I suppose I need only to wait now...

[sentrionic]

You can use something like https://dnschecker.org/. If most can't resolve it then there's an error.

[itsbek]

all passed but Im still being redirected to login page. here, check it out yourself testdeploymyapp.xyz

[itsbek]

still receiving 403 forbidden status, sighs...

[itsbek]

Heroku:

just wanted to ask why did you add api in front of your domain? I did the same too, but just followed yours that's why...

[itsbek]

I have noticed in your website, cookies are there even in the initial load, but mine is empty always...

I mean is it still the sign the backend and frontend not in the same domain name?

[sentrionic]

The api part is for the backend and it's something I took from Ben.
As for your cookies still not being set, I got no idea, since trust proxy is set and your changed your domain.

[itsbek]

what do you think I should do? if it's possible and alright with you I can live share on the vscode for quick scan

[itsbek]

is that possible that, dns settings still haven't been applied yet or smth similar?

[sentrionic]

Since you set your domain in the middleware and your backend in the web environment variables, I really don't have anything else I could point you to. All I can do is show you my netlify settings:

[itsbek]

yeah my netlify is the same too, Im gonna try to dig up more
if you have anything in mind plz feel free to share, and thank you!

[itsbek]

Heyyy, I woku up and visited the deploy page and to my surprisemy deploy is up and running 😀
Just wanted to ask did I say it right about uploading the files? if not, how shall I approach it?

ahh that one, that feature is disabled - if I am not mistaken to avoid spam which would also cost for storing in S3 but that's only in production. so if you running the start:prod then you need to enable it. remove the disable variable in the web>components>layouts>guilds>chat

edit: also, which aws policy should I enable to display the images? cuz now I can upload to the aws bucket but cant get it displayed;

can't edit the messages somehow... it shows edited but actual text doesn't change

[sentrionic]

You are right with that and you would have to remove the check on the backend as well.
Editing Messages was fixed in the latest commit.
AWS policies you best google I don't think my settings are the recommended ones.

[itsbek]

check in the backend?
ooh I see, if I'll try the last commit then, but if I am not mistake I pulled your last month commit, who knows I'll try again
and abt aws policies - I'm not intending to make it as identical as yours, but just was wondering which/what feature/policy allows to get back avatar images

[sentrionic]

The createMessage function has a if (file && !PRODUCTION) check, you will need to remove the !PRODUCTION part.

My bucket has the following policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::harmony-cdn/files/*"
        }
    ]
}

[itsbek]

I have just pulled your latest commit, and deployed it but had these on the logs:

[sentrionic]

I would just clear the database, Heroku has that option if you go to
Resources > Heroku Postgres > Settings > Reset DB
Since my production build doesn't really host actual important stuff I don't pay too much attention to database migrations.

[itsbek]

yep I did try that, but
(node:21) UnhandledPromiseRejectionWarning: Unhandled promise rejection error being pain

[itsbek]

I have taken off the !PRODUCTION part in the backend and disabled={!disable} in the frontend part but somehow the file upload icon doesn't seem to respond.

here's the FileUploadButton's current look

edit: I have removed the disable variable above