http://localhost:3001/api/getUser failed

[mohamedebrahim96]

Please i need your help....
how can I connect my github to the portfolio ??
FetchError: request to http://localhost:3001/api/getUser failed, reason: connect ECONNREFUSED 127.0.0.1:3001

[mohamedebrahim96]

[sineto]

@mohamedebrahim96, you can run the decoupled API that I build for this project, here: https://github.com/sineto/snio.portfolio-api

If you have any problem, let me know. 👍

[mohamedebrahim96]

really thanks for your replaying.

please i need documentation how to use this project portfolio-api with the snio.portfolio

[sineto]

Sure, @mohamedebrahim96! It's a quit simple. Once eu have both repositories on your local directory, you can run using the command yarn next. If you noticed, the snio.portfolio repository have a .env.local file with a API_HOST env variable. You can change it if you like. The Nextjs always run the server on :3000 port, but you can set another port with -p yarn flag. So:

• Change the API_HOST value on .env.local file
• And set, to API repository (snio.portfolio-api), the same port to -p yarn flag like yarn next -p 3001

The important thing about those is you have to set the same localhost port for both API_HOST env variable and Nextjs API server. Sorry my english, but if you cannot understand me I can try to explaine this to you again.

[sineto]

Waiting for an answer. If you need help for this issue, please reopen it. Thanks!

[mohamedebrahim96]

WOW, Works like charm!

thanks alot for ur documentation

[mohamedebrahim96]

one last thing
how can I deploy two repo together on a server?

in other words:
how can make two repo works together?

[sineto]

@mohamedebrahim96, you can join the API to the front-end server just put the utils API directory on it. And then call the getData module inside pages/index.jsx like this:

/* snio.portfolio repository */

// pages/index.jsx
import getData from '../utils/getData';

export const getServerSideProps = async (context) => {
	// const request = await fetch(`${process.env.API_HOST}/api/getUser`);

        // call getData module instead of fetch api
        const { repositories } = await getData('username');
	return {
		props: {
			repositories
		}
	};
};

After do that, you can hosting the project on Vercel that builds Nextjs servers like magic. That's the simple way. The another way is up both repositories on separated servers on Vercel. And then when you are configuring the front-end server you can setting up Environment Variables, giving to API_HOST an url to the hosted API.

Let me know if need more help! Cheers

[mohamedebrahim96]

again Cheers!🥳🥳🔥
works like charm on vercel but heroku not working
https://mohamedebrahim96.vercel.app/

thank you so much

[sineto]

Awesome, @mohamedebrahim96! Enjoy!

ps.: sorry the Heroku thing... I don't give a try to host my portfolio there, so I can't help you on it. :/