0

I am Building a tiktok-clone using react js ..with the help of netlify cli (Netlify Dev)..it works very fine in localhost:8888, but it doesn't work in localhost:3000.My database for this project is datastax astra. Need Help!!

This is the pic...on localhost:3000 and also after deploying on netlify it shows the screen same.

1

This is the pic when its run on localhost:8888 as a netlify Dev.

Please help!!!

4 Answers4

1

PORT 8888 is the port your Netlify dev server runs on. You should access your application on PORT 8888 when you run netlify dev.

PORT 3000 is the port for your webpack dev server.

Alex L
  • 789
  • 9
  • 14
1

I was working on this same project today and trying to figure out this exact same problem but found the solution. It's an old question but for those still doing this workshop and come across this.

Reason why -

  • you have a file called .env that has your astra info on it
  • because you have this file on your local host, it will run netlify dev properly and use the info from that file
  • the problem is when you launch on the web, you can still have .env on your repository but it is ignored because of the .gitignore file
  • even if you delete the command in the .gitignore file, it won't work (no idea why)

Solution -

  • you have to import the .env info to your netlify environment variable so it can connect your netlify to your astra through the actual servers

Run this command in your integrated terminal:

netlify env:import .env

After rebuild and redeploy to production with netlify:

netlify build
netlify deploy -p

Note: I'm not 100% positive if it is necessary to build and deploy again. It just happened to not work for me until I did.

tdy
  • 36,675
  • 19
  • 86
  • 83
Isai Duran
  • 11
  • 3
0

You don’t provide enough context. 502 error serves different purpose on particular sites so we can’t understand your problem. If it worked on 8888 then why would you want other port to take its place? As I could see your frontend is served on 3000 but media is not which could lead to 502. Are you running 2 seperate frontend server and backend server?

Yves Ng
  • 69
  • 10
  • sir i am new to react js and i followed the tutorial from youtube ..,the youtube channel named Code with Ania Kubów and her tiktok clone tutorial –  Apr 07 '21 at 05:50
  • sir when i deploy my app to netlify it just shows a localhost:3000 content not the full app –  Apr 07 '21 at 05:54
  • this is the output when i deploy to netlify https://tikok-clone-askcoder.netlify.app –  Apr 07 '21 at 05:57
  • Of course because netlify serves static resource and support frontend engine like React only. It doesn’t work as a backend or database server – Yves Ng Apr 07 '21 at 06:34
  • But sir what can i do to make my react js app run on localhost 3000 and where to deploy can u please guide me... –  Apr 07 '21 at 07:33
  • You just need to deploy your database on a public host service, like heroku. Your frontend react app can be served on netlify bit your database needs to go live somewhere else – Yves Ng Apr 07 '21 at 09:31
  • ok sir but can guide me how to do that because i m new to the environment –  Apr 07 '21 at 09:55
  • Oh sorry I didn't notice. You're using Astra already. The reason for your project doesn't run on localhost:8888 but not 3000 might be you didn't include localhost:3000 into the Astra whitelist ( to allow request from a site ) – Yves Ng Apr 07 '21 at 10:09
  • ok sir...but what should i do now ? do there is a need to change anything in code or in datastax astra website –  Apr 07 '21 at 10:41
  • In the datastax config of course. I hope you have knowledge about http headers and things – Yves Ng Apr 07 '21 at 10:44
  • sir i m unable understand because i haven't used datastax astra before –  Apr 07 '21 at 10:54
  • sir this is the code i refer https://github.com/kubowania/stargate-tik-tok.git –  Apr 07 '21 at 11:03
  • is it possible to change the database like Mongodb or firebase –  Apr 07 '21 at 11:05
  • No you shouldn’t. You should stick to cassandra since you’re making video streaming app. Before changing any config was you trying to run react dev script? If so you can write to `.env` file this line ```PORT=8888``` and the dev server will start on localhost:8888 – Yves Ng Apr 07 '21 at 11:17
  • ok but what about localhost 3000 will it be as PORT=3000 –  Apr 07 '21 at 11:23
  • If you set port to 8888 none of your dev script will start on 3000 – Yves Ng Apr 07 '21 at 11:24
  • and sir how to deploy it pubic like netify,github,heroku –  Apr 07 '21 at 11:26
  • You don't need to, you have Astra as your database service already – Yves Ng Apr 07 '21 at 11:29
  • so sir why it is not clear in react app after deploying itt to netlify –  Apr 07 '21 at 11:34
  • What do you mean? Btw edit your question with more information so you can get better help – Yves Ng Apr 07 '21 at 11:35
  • sir just take a note on this https://github.com/kubowania/stargate-tik-tok.git this is the exact code i follow –  Apr 07 '21 at 12:12
  • Ok hold on my friend – Yves Ng Apr 07 '21 at 12:13
0

In my case, the problem was Netlify could not access my .env keys. To overcome it, I opened my app dashboard on Netlify and then click on: 1) site settings 2) environment variables 3) add a variable

For key just enter your variable name as it is in your .env file. For values enter your variable value. No need to put ""

scopes can stay default (All scopes and Same value for all deploy contexts)

Abdulhakim
  • 620
  • 8
  • 11