Installation problem

[chawaa]

Great project, I like it very much. Could you write a more detailed installation tutorial or video tutorial？

[Sandermoen]

Hello and thank you!
Do you have any specific parts of the setup you are struggling with?

[chawaa]

Glad to receive your reply. i'm not good at programming，so I have some strange problems.

1. Install npm dependencies using npm install. -->There is a warning.

After, run npm audit fix to fit them.

But there is a new warnings:“1 vulnerability required manual review and could not be updated.”

npm audit for details

2. I uploaded the .env file to the root directory(/www/instaclone), but I cannot see it.

My .env file is filled with the same content as the picture. I don't know if it is correct?

Thank you again, author!

3. npm run dev. There are some warning.

and how could I keep running both the backend and the front end？

4. How do I add a domain name?

image（http://ip:3000）

[TimchaStudio]

@Sandermoen Your project is awesome.

If there is a more detailed installation tutorial, the project will be more popular.

Mastodon is a good example. It has a very detailed installation tutorial.

[TimchaStudio]

Looking forward to your reply.

[Sandermoen]

Glad to receive your reply. i'm not good at programming，so I have some strange problems.

1. Install npm dependencies using npm install. -->There is a warning.

After, run npm audit fix to fit them.

But there is a new warnings:“1 vulnerability required manual review and could not be updated.”

npm audit for details

1. I uploaded the .env file to the root directory(/www/instaclone), but I cannot see it.

My .env file is filled with the same content as the picture. I don't know if it is correct?

Thank you again, author!

1. npm run dev. There are some warning.

and how could I keep running both the backend and the front end？

1. How do I add a domain name?

image（http://ip:3000）

1. The first error you're getting where it tells you there's a high severity vulnerability is actually a problem with react-scripts (facebook/create-react-app#9469), it's an outdated dependency that they need to update so that one you do not need to worry too much about.

2. The most likely problem with your .env file is that you need to remove the // before the information, here's an example of how it should look

MONGO_URI=mongodb://localhost:27017/instaclone
JWT_SECRET=j2390jf09kjsalkj4r93
CLOUDINARY_API_KEY=fakeCloudinaryApiKey
CLOUDINARY_API_SECRET=fakeClouinaryApiSecret
CLOUDINARY_CLOUD_NAME=fakeCloudinaryCloudName
SMTP_HOST=mail.example.com
SMTP_PORT=587
EMAIL_USERNAME=example@example.com
EMAIL_PASSWORD=Password
HOME_URL=http://localhost:3000
GITHUB_CLIENT_ID=fakeGithubClientId
GITHUB_CLIENT_SECRET=fakeGithubClientSecret

The // is only there to illustrate that it's commented out and that you need to fill in the information.

3. The warning you are getting when running npm run dev is actually partially my fault for not including nodemon in the dependencies in package.json. All you should have to do to remedy this issue is to simply run npm install -g nodemon.

4. The npm run dev command runs both the backend and frontend using concurrently.

5. To add a domain to your server all you have to do is purchase the domain of your liking from a website like Namecheap. You would then have to configure your domain to point to your server's public ip address. I'm sure you can find some good tutorials online if you search around.

If my explaining wasn't good enough or you're still struggling, please let me know!

[Sandermoen]

@Sandermoen Your project is awesome.

If there is a more detailed installation tutorial, the project will be more popular.

Mastodon is a good example. It has a very detailed installation tutorial.

Thanks I'm glad you like it!
I hope my last reply will clear up some of your confusion about the installation steps!

[chawaa]

Thanks for taking the time to contribute an answer. It’s because of helpful peers like yourself that we’re able to learn together

Your answer solved my first 3 questions.

1. I am not sure if my .env file is correct？

Now my .env

MONGO_URI=mongodb://localhost:27017/www/instaclone
JWT_SECRET=z2390jf09kjsalkj4r94
CLOUDINARY_API_KEY=44522****99
CLOUDINARY_API_SECRET=OnaiGXk7_*****-E5aWsdfHP0V0
CLOUDINARY_CLOUD_NAME=shegusi
SMTP_HOST=smtp.163.com
SMTP_PORT=465
EMAIL_USERNAME=da_vin@163.com
EMAIL_PASSWORD=HDF****
HOME_URL=http://localhost:3000
GITHUB_CLIENT_ID=d36******8fd19e9
GITHUB_CLIENT_SECRET=2cb8d61840c5c******836d8b44495d4e91

my root directory is /www/instaclone. --> MONGO_URI=mongodb://localhost:27017/www/instaclone

JWT_SECRET=z2390jf09kjsalkj4r94 <-- Change to my JWT_SECRET

2. There is “Invalid Host Header” error?

I have configured my domain to point to your server's public ip address.

ping www.heidongwang.top :

visit the site http://www.heidongwang.top:3000

but visit the site http://ip:3000 -->Jump to the login page.

3. http://ip:3000-->https://www.heidongwang.top

How to add ssl certificate? and change the port to 443 ？

4. When I close the command client(xshell), the website cannot run -->How to keep it running when the client is closed

5. Other questions?

Click to enlarge the picture

[Sandermoen]

1. I am not sure if my .env file is correct?
Your .env file looks mostly fine to me, make sure the MONGO_URI points to the correct mongodb server. If you are running mongodb locally on the same server what you have in your file should be fine. You can also host a mongodb server for free here.

2. There is “Invalid Host Header” error?
I am actually not sure what the direct cause of this problem is, as I am not an expert :). However from what I've gathered from google, it seems that the problem may be related to some firewall settings for your server? I'm sure you can find some good resources online to solve this.

3. How to add ssl certificate? and change the port to 443?
For adding an ssl certificate I recommend trying out Cloudflare. Here's the first tutorial I came across explaining how to use cloudflare for ssl. Another alternative is using Let's Encrypt, though this option requires more configuration on the server side of things. Here's a helpful tutorial for this option. (If you were wondering, the live demo version of the website is hosted with Heroku which automatically applies an ssl certificate).

4. When I close the command client(xshell), the website cannot run -->How to keep it running when the client is closed
A good option for this is using the pm2 library which assures that your process runs forever and restarts if any crashes occur. This daemonizes your process allowing you to exit out of the shell without interrupting the process.

5. Other questions?
The compile warnings you see are a result of missing dependencies from different useEffect hooks. These can safely be ignored for now, if you would like to suppress the warning you could include the below code on the lines where the warning appears.

// eslint-disable-next-line react-hooks/exhaustive-deps

The ip you see is the local ip the project is being served to.
I also see an error where it states that a dependency was compiled against a different node version, if you haven't already I would suggest trying to upgrade your node version if it is outdated.

[chawaa]

@Sandermoen I am very satisfied with your reply. Thank you.

[Jishi8088]

Hello @Sandermoen
Your project is superb...but the screen mentioned is what i am getting even though it is connected to socket properly

please help as soon as possible

[webkokri]

Hello @Sandermoen Your project is superb...but the screen mentioned is what i am getting even though it is connected to socket properly

please help as soon as possible

have you found any solution on it?

[Sandermoen]

Hey! Try to clear your browsers local storage and see if that works :)

…

On Thu, Jun 9, 2022, 07:28 webkokri ***@***.***> wrote: Hello @Sandermoen <https://github.com/Sandermoen> Your project is superb...but the screen mentioned is what i am getting even though it is connected to socket properly [image: Screenshot from 2020-09-25 11-18-31] <https://user-images.githubusercontent.com/68326989/94231187-1fc18000-ff21-11ea-9fc7-4cf59c74eaa3.png> [image: Screenshot from 2020-09-25 11-09-05] <https://user-images.githubusercontent.com/68326989/94231193-22bc7080-ff21-11ea-8a5a-867cbffa9283.png> please help as soon as possible have you found any solution on it? — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM3Y7URBPTYZLL5GSKGO2ELVOF6HTANCNFSM4P36QZQQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[webkokri]

Hey Sandermoen, you have done a great job. I'm facing a critical issue on installing the software on ubuntu 20 under the nginx. It's working perfectly on the localhost, but whenever installing it to the web server, facing the token=undefined.
Let me share the screenshots. Could you please guide me how to fix this undefined token issue? I have allowed all the required ports on the server but still not able to figure this out.

[Sandermoen]

Im unsure why that's happening, I think you might have to enable websocket connections in nginx.conf

…

On Fri, Jun 10, 2022, 11:21 webkokri ***@***.***> wrote: Hey Sandermoen, you have done a great job. I'm facing a critical issue on installing the software on ubuntu 20 under the nginx. It's working perfectly on the localhost, but whenever installing it to the web server, facing the token=undefined. Let me share the screenshots. [image: un] <https://user-images.githubusercontent.com/59289573/173034462-8bef7dd8-638c-4e82-baeb-b7c9ce7559a5.png> [image: un3] <https://user-images.githubusercontent.com/59289573/173034474-95db9191-ba38-4cbd-84f8-291461717105.png> [image: un2] <https://user-images.githubusercontent.com/59289573/173034479-fea9a12b-c9f9-4737-974e-f8b198eef1a2.png> — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM3Y7UTWKPBJLHJRAHZ5GBDVOMCH7ANCNFSM4P36QZQQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[webkokri]

I have tried with websocket but no result. I'm a bit surprised to see if I command it "RUN NPM DEV" the token is being generated even on the same server, but whenever I'm trying with "RUN NPM BUILD" it's giving the error specified above. What could be the reason?
Any Idea? @Sandermoen

[webkokri]

@Sandermoen I found the issues.
The project is running perfectly fine whenever we are using the command "npm run dev". The auth or socket token is being served without any issue. But whenever we are trying to make a build using "npm run build", it's starting with the error defined above.. or as link shared below;

Could you please help me out or try it on your behalf?
Request URL: http://192.168.18.10:3000/socket.io/?token=undefined&EIO=3&transport=polling&t=O67Ny2q

[Sandermoen]

The project is set up in a way where you have to use the express server to serve the frontend, if you don't they won't connect since they'd then be running on a completely different ip/port that the client won't recognize. What you have to do is make sure you run *npm run build* in the *client *directory, then make sure that the *NODE_ENV *environment variable is set to *production* for the express server to serve the built frontend. You'll then be able to access both the frontend and the backend on the same ip and port by running npm run index.js in the root directory. As you can probably tell this setup is really unfortunate for scaling and could/should be changed if you have a bunch of users.