Deploying issue with my React app

[tyomart]

Hi! My name is Artem.
I am new to GitHub and trying to deploy my first React project have an issue.
After npm build, checking package.json homepage value my app is not deployed. After clicking on Visit Site link
"artemkorenuk_jsx_pfl
Getting Started with Create React App" shown.

Who knows how to solve it BingChat and BardGoogle couldn't help me.

This is my repository https://github.com/tyomart/artemkorenuk_jsx_01.git
and the link on deployed https://tyomart.github.io/artemkorenuk_jsx_01

I used LESS pre-processor with Craco, maybe there is issues because of that? Or I don't know.
Not such experienced in coding and deploying.

Thank you

[airtower-luna]

Your repository seems to be configured to deploy from master, which doesn't have an index.html file, so Jekyll generates one from the README.

There is a gh-pages branch in the repository that has an index.html, maybe you actually want to deploy that? If yes, you'll have to update the publishing source and choose that branch. Otherwise the solution depends on what you actually want to achieve.

Who knows how to solve it BingChat and BardGoogle couldn't help me.

Piece of advice: Asking chatbots for advice is a waste of time, no matter which one. You need to understand the topic already to be able to judge if their answers are (potentially dangerous) nonsense or (by pure chance) correct. So best just learn about the topic to begin with. 😉

[tyomart]

Thank you, airtower-luna!

I tried from different branches after and had no result.
Also I deployed another repository
https://github.com/tyomart/tryout_react01
to
https://tyomart.github.io/tryout_react01/

There is blank screen instead of Monster Rolodex (worked on my local server)
and when I changed /static/blabla.. to static CSS turned on when any content added to , JS not working
but the same project succesfully deployed on Vercel https://tryout-react01.vercel.app

the project https://tyomart.github.io/artemkorenuk_jsx_01 not working on Vercel too.
Maybe it caused by LESS installed with Craco? but actually, I don't know

Bing and Bard can be helpful, but often they are the huge waste of time ))

[airtower-luna]

There is blank screen instead of Monster Rolodex (worked on my local server)
and when I changed /static/blabla.. to static CSS turned on when any content added to , JS not working
but the same project succesfully deployed on Vercel https://tryout-react01.vercel.app/

That sounds vaguely like you have an issue with incorrect absolute paths. E.g. href="/static/something.js" will break if your site is deployed under /tryout_react01/ (because the browser will look under /static/, outside the site). See: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#absolute_urls_vs._relative_urls

[tyomart]

It seems, I fixed it finally. That was react-router issue with paths.

here the solution :
https://dev.to/janjibdev/problem-with-react-router-app-and-github-pages-lij

 <Link className='n-link' to='calc_a/calculator'> CALCULATOR </Link> // added 'calc-a/' 
           
 <Link className='n-link' to='calc_a/quotamat'> QUOTAMAT </Link> //added 'calc-a/' 

and the same in Apps.js

now it is works, but with new moment(2 calc_a in path ) he-he ))

https://tyomart.github.io/calc_a/calc_a/quotamat

but started from https://tyomart.github.io/calc_a/

And error on Vercel, not fixed yet 'react-scripts: command not found'. maybe it is caused by react-router as well
And not fixed /tryout_react01/ yet

[tyomart]

change paths on App.js and on Navigator.jsx. It is not fully solved out, because it cause page 404 error when trying to go back. But at least the page with menu is on screen and components are working.

And similar issue with paths when deploying project on Surge, Firebase, Vercel and I don't know how to fix it (((( tried different paths and configuration of .json files, not working. Perhaps, I don't understand some important things about paths

here the solution :
https://dev.to/janjibdev/problem-with-react-router-app-and-github-pages-lij

  <Link className='n-link' to='calc_a/calculator'> CALCULATOR </Link> // added 'calc-a/'

  <Link className='n-link' to='calc_a/quotamat'> QUOTAMAT </Link> //added 'calc-a/'

and the same in Apps.js