I've been trying to build my first github page for several weeks already. It shows an empty page and I don't know if I'm doing something wrong?
Here is my repository https://github.com/NatellaGomza/reactdnd/tree/gh-pages and page https://natellagomza.github.io/reactdnd/
Thank you in advance!
Look inside your index.html. There are scripts looking like this <script defer="defer" src="/reactdnd/static/js/main.42b16ba6.js"></script>.
As you can src starts with / which is not what you want with github pages, because your page is deployed to https://natellagomza.github.io/reactdnd/ and not https://natellagomza.github.io/.
The solution depends on the bundler you are using.
I guess that you are using create-react-app so the simple change in package.json will do. Try adding "homepage": "./" and then build.
I personally use this gist that automatically builds and deploys my apps after each push to the main branch
Related
This is the link to my GitHub project, see the directory structure: https://github.com/SutirthaDey/crowdcoin
app link: https://crowdcoins.netlify.app/
I have used react,nextJs, and next routes for dynamic routing. The problem I'm facing is after deploying it using netlify, everything is working fine but when I do a refresh, it's showing 404 pages not found(except the main index.js page/landing page). I don't know whether I was doing it appropriately but tried several things like using netlify.toml and _redirects but nothing really worked. Other than the refreshing part, everything is working fine.
I was stressing out for days over this its such unique problem that I couldn't find the answer too anywhere. I also followed the same Solidity tutorial as you and unfortunately the tutorial is very out of date so a lot of things don't really work. I had the exact same issue as you when trying to build on netlify. It took a while to figure out but basically the next-routes package does not work with netlify. So you will have to set up your routes just using vanilla Next.js. So delete the server.js and routes.js files then search up how to create routes using Next.js I would suggest these tutorials they are very good! Next routes tutorials. Hopefully this helps others I don't want anyone else to go through what I had to go through lol
I have an html page in a subfolder of my github page but I don't see it. instead I see an old react app I once had there.
Site: oren.github.io/food
Code: https://github.com/oren/oren.github.io/tree/master/food
Any idea what's going there? Maybe some settings on my github pages that I need to tweak? I don't think it's caching issue since it has been 7 hours since I copy the code of my new site into the food folder.
i deleted both my food repo and my github pages repo and the problem is solved (:
I believe that react did some interesting things with gh-pages. anyway. life is great.
I'm trying to deploy my first react app and I followed the link below to deploy it on gh-pages. When using Git Bash I didn't get any error message, assuming that it worked. However, when I open the link through settings, it just shows a blank page. What am I doing wrong? Thank you in advance.
Here is the link to my repository: https://zerhar.github.io/todo-app/
Link to how to deploy a react app to Git Hub Pages: https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
If I "view-source" https://zerhar.github.io/todo-app/ I see that the JavaScript script tags are not pointing to the correct path.
For example, here is one of the script tags which links out to this dead link:
<script src="/Zerhar/todo-app/static/js/2.15fea075.chunk.js">
It needs to be adjusted, so the link becomes this:
<script src="/todo-app/static/js/2.15fea075.chunk.js">
I'm not quite sure where the script tags are being setup as I didn't see them listed here but that would be the first thing to try to fix.
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.
I have built my react js app with create-react-app configs and it works fine in development build of React.
I built that with npm build command and now i have build folder.
this web page is static (server-less), Now I want to know how to use that and where put files in Cpanel.
After the bundle realized by webpack, you can check the transpiled and minified version inside the build folder. You should upload all the content to your public_html or another folder.
And the meaning of server-less is totally different than you're using. Check this article to understand what it is: What is serverless.
I do not use CRA boilerplate since i have my own but in your case, you should find where your js bundle is. You can find the bundle location in the webpack config. Then append that to your html somehow like this:
<div id="root"></div>
<script src='your-js-bundle'></script>
Assuming that somewhere in your code, you are appending your js code into a div like this:
const element = <h1>Hello, world</h1>; // assuming element is your entry point
ReactDOM.render(element, document.getElementById('root'));
That works if its just simple react project your working on (No SSR and such)