Having a problem to publish my page

[nugrezo]

Select Topic Area

General

Body

Hi everyone,
I am having a problem while I try to publish my page.
this is my repo:https://github.com/nugrezo/amerikailan.org
it says my site is live at https://nugrezo.github.io/amerikailan.org/
however when I click the link I do not see my page pops up in the browser. On the other hand, I only see the below context as a draft when I click visit site. Could you please help me what is the problem and How can I see my web site on the browser when I click the live link above?Thank you very much. Really appreciate all your contributions

amerikailan.org
Getting Started with Create React App
This project was bootstrapped with Create React App.

Available Scripts
In the project directory, you can run:

npm start
Runs the app in the development mode.
Open http://localhost:3000/ to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More
You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

[fury-05]

This is React Website / App you need to do additional configuration to run it in GitHub pages.

You can take idea from this sample code :

Install GitHub Pages Package: Install the gh-pages package as a development dependency.

npm install gh-pages --save-dev

Update package.json: Open package.json and add the following lines:

"homepage": "https://your-username.github.io/your-repo-name",

Replace your-username and your-repo-name with your GitHub username and repository name.

Add Deployment Scripts: Still in package.json, add the following scripts:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
}

Deploy to GitHub Pages: Run the deployment script in your terminal:

npm run deploy

Check the Deployment: After the deployment script completes, you should see a new branch named gh-pages in your GitHub repository.

Configure GitHub Pages in Repository Settings:

1. Go to your GitHub repository on the web.
2. Click on the "Settings" tab.
3. Scroll down to the "GitHub Pages" section.
4. Choose the gh-pages branch as the source.

Now you can access you site on github url, if its visible then you can procced with adding custom domain.

[nugrezo]

Hi fury-05.

I am currently working on deploying a web application with a front end repository named frum-system-client and a backend repository named forum-system-server. I have encountered an issue with the deployment process, and I am reaching out to seek assistance in resolving it.

Here are the steps I've taken so far:

Pushed both repositories from my local machine to GitHub.
Deployed the front end to GitHub Pages and the backend to render.com.
Updated the front end's API URL to fetch data from render.com.
Ran npm run deploy for the front end.
Added the homepage field to the front end's package.json.
Published the page, choosing the source as gh-pages on GitHub.

After all these steps, I can run my application in the local environment. Despite following these steps, the published page does not display any content. I have checked the browser console for errors, reviewed deployment logs, and ensured that API connections and configurations are correct. However, I am still facing difficulties in identifying the root cause of the issue.

If you could spare some time to assist me with troubleshooting or provide any insights, I would greatly appreciate it. Additionally, if you need more specific information or logs, please let me know, and I'll be happy to provide them.

Thank you in advance for your time and assistance.

[fury-05]

If you say that it is running perfect locally, then defiantly the problem is in configuration in either render or github.

And yes without logs it will be just wild goose chase.

For now check these few things :

1. Ensure that the API connections from your frontend to the backend are correct. Double-check the API URL in your frontend code to make sure it's pointing to the correct endpoint on render.com.
2. Check if your backend on render.com allows requests from the domain where your frontend is hosted (GitHub Pages). You might need to configure CORS settings on your backend.
3. Use the browser's developer tools to inspect network requests. Check if there are any failed requests or if the data is not being retrieved as expected.
4. If your frontend is served over HTTPS and your backend is on render.com, ensure that your backend also supports HTTPS to avoid mixed-content issues.
5. Ensure that the backend is deployed and running before deploying the frontend. The frontend relies on the backend, so it should be available when the frontend makes API requests.
6. Confirm that any environment variables needed for your application (such as API keys or configuration settings) are correctly set in both the local environment and the deployment environments.

And I will add remove custom domain if you are using it just run with github's default domain once website / app is visible in default domain then go for custom domain setup.

[nugrezo]

Thank you for your reply. I found the solution and finally I successfully published my page.
I’ve just changed my BrowserRouter to Hashrouter. Github does not support BrowserRouter. If the app has many routes which are wrapped by BrowserRoueter the github live page comes blank. The only thing we need to change it BrowserRouter to Hashrouter. That is it. I have been searching it for 2 days but finally I’ve solved. Posting this reply for the one who has the same problem.

[codewithrama]

how can we change it

[ghostinhershell]

Thank you for chiming in here and offering support @fury-05! 🚀

[ghostinhershell]

Hey there! 👋

Thanks for posting in the GitHub Community, @nugrezo! We're happy you're here. You are more likely to get a useful response if you are posting your question in the applicable category. The Accessibility category is a place for our community to discuss and provide feedback on the digital accessibility of GitHub products. Digital accessibility means that GitHub tools, and technologies, are designed and developed so that people with disabilities can use them.

I've gone ahead and moved this to the correct category for you. Good luck!