It seems like I followed all the necessary in the documentation but it keeps giving a 404 Error: "There isn't a GitHub pages here" when I go into https://juliesong.me.
I got my custom domain through GoDaddy and configured the DNS like so:
Then I changed my package.json file to have
"homepage": "https://www.juliesong.me",
Added a CNAME file in the root directory containing
www.juliesong.me
And lastly went into settings in GitHub pages:
I searched my issue up and a lot of people said it might have to do with the React Router, so I edited to include a basename:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter as Router } from "react-router-dom";
import * as serviceWorker from './serviceWorker';
const routing = (
<Router basename={process.env.PUBLIC_URL}>
<App />
</Router>
);
ReactDOM.render(routing, document.getElementById('root'));
This is my App.js:
import React, { Component } from 'react';
import {Route} from 'react-router-dom';
import { withRouter } from 'react-router'
import { GlobalStyles, } from "./util/GlobalStyles";
import Home from './containers/Home'
class App extends Component {
render() {
const home = () => <Home />
return (
<main>
<GlobalStyles />
<React.Fragment>
<Route exact path="/" component={home} />
</React.Fragment>
</main>
);
}
}
export default withRouter(App);
If anyone could help on this issue, that would be great:)
Try this one
add new file named .htaccess in your build folder
example of file
and add this code into your .htaccess file
the code
Unless you share how you are generating the build and pushing it to GitHub Pages, it is very difficult to identify the cause of this issue.
Still let me share a general way you would deploy a react app in GitHub pages.
You don't need to add basename in your router
Good thing is you are using HashRouter instead of BrowserRouter, because GitHub pages doesn't support history api like normal browser, it will look for a specific file in given path
To deploy your app you need to run the following command in same order -
npm run build # this will generate a build folder
gh-pages -d build # this will publish the build folder to GitHub pages
This is very important that you publish the build folder, because
its contains the index.html file, which GitHub will point.
You can read more about deploying react app to GitHub Pages here
React-app out of the box is client-server application, and you should compile it first to html + client side js before deploying.
There are lots of good docs: create-react-app.dev, medium.com and the shortest way here
Related
I'm poking around with react routing and can't get it to work. I've stripped down to an empty new project just to test the fundamentals, and still can't get it running. I am using vscode and generated my react project using npx. This is my current code:
App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import './App.css';
import Landing from './components/Landing'
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<Landing />} />
</Routes>
</BrowserRouter>
);
}
index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
My landing.js is just a text entry, which I have confirmed does work if there is no BrowserRouter wrapper.
I've tried:
Adding <h1>Hello</h1> within <BrowserRouter> to see if it would render prior to the Routes -- it did not.
Varying syntaxes (component vs element keyword, different paths)
Leaving index.js as default and doing routing in App.js
Leaving App.js as default and doing routing within the render function in index.js
All of the resources I've found online for react-router-dom#6 points that this (or some iteration of what I've done) is correct, yet I get a blank screen no matter what I do once I wrap within <BrowserRouter>.
Any help would be invaluable at this point; I don't think I'll be able to continue on my own.
After creating the project with npx create-react-app bin the next step should be to cd into the bin directory and run npm install to install dependencies, then npm i -s react-router-dom to install react-router-dom and save it to your package.json file, then run npm start to run the app. I think the node version installed should be fine.
Steps:
Create project: npx create-react-app bin
Change into the project directory: cd bin
Install project dependencies: npm i
Add react-router-dom to the project: npm i -s react-router-dom
Edit code & save
Run the project: npm start
I have a multi-page application that doesn't use Node. It has a bunch of HTML and JavaScript files. I want to render React components in the application, which I found I am able to do with ReactDOM.render.
However, I am building out the React components separately in a project made with npx create-react-app. I can use npm run build which gives me a main.js file that contains a production ready version of all my components.
I can add this main.js file into my HTML files with a script tag to have my components render in my multi-page application.
However, the problem is that I notice when I run npm build, I get one main.js file that contains everything. This is not good because the app will run too slow if I have to load all of my React components in main.js file every time I go to a new page.
Instead, I am looking to only load the specific components I need for a page.
Example:
Let's say I had a test1 component and a test2 component.
Page1 has a script to use test1, so I only want to load test1 on Page1.
Page2 has a script to use test2, so I only want to load test2 on Page2.
Therefore, I need a test1.js file and a test2.js file after npm run build
How would I do this?
Sounds like a use case for Code Splitting.
If you want to split per-page with React Router you can do the following:
import React from "react";
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
const Home = React.lazy(() => import("./Home"));
const Contact = React.lazy(() => import("./Contact"));
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
This should generate multiple JS files for different components (e.g. pages) when used with some standard build tools like create-react-app.
I tried to develop my first Shopify module but when i use React i have this error in my application page on the shop.
Here my index.js
import {Page} from "#shopify/polaris";
import {RessourcePicker} from "#shopify/app-bridge-react";
class Index extends React.Component{
state = {open: false}
render() {
return (
<Page
title="Product selector"
primaryAction={{
content:'Select products',
onAction: () => this.setState({open:true})
}}
>
<RessourcePicker
ressourceType='Product'
open={this.state.open}
/>
</Page>
)
}
}
export default Index;
Shopify allows its users to determine their own React version, hence Shopify wouldn't deploy React for you and lock you on a version you might not be interested in using. You can see how Shopify defines React as a peer-dependency so the responsibility of deploying and importing React is on the user.
I think that in your case, what you might be missing is deploying React as a dependency on your package.json, and import it as follows:
import React, { Component } from "react";
I ran into the same issue with their tutorial, I went in to the package.json and changed the dependency,
"react": "^16.9.0",
"react-dom": "^16.9.0"
Then I went to my terminal and installed react again:
npm install next react react-dom
now its working fine.
You do not need to add the import.
You should use
import React from "react";
To be safe from this type of errors. If any of your previously defined imports do import React import React will not work.
But I recommend it to just be safe
When I enter localhost:8080 in my browser it displays App.js component. But when I navigate to localhost:8080/#/hello it displays same App.js component instead of hello.js. localhost:8080/hello show "can not get localhost:8080/hello" . What is the problem with my code? I am using webpack and babel in my App.
//index.js
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store} from './public/store/store';
import App from './public/Components/App';
import Hello from './public/Components/hello';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
//import './index.css'
render(
<Provider store={store}>
<Router>
<div>
<Route path="/" component={App}/>
<Route path="/hello" component={Hello}/>
</div>
</Router>
</Provider>,
document.getElementById('root')
)
//App.js
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div>
<h1>React Js.</h1>
</div>
);
}
}
//hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
There are a few things happening here, let me try to explain what's going wrong and how you can fix them.
http://localhost:8080/#/hello it displays the same App.js component instead of hello.js.
Because you are using BrowserRouter instead of HashRouter (an older version, # is not working). The browser reads only the first part of your URL which is http://localhost:8080/. The # is similar when you route to a section of a page using the following.
Goto projects
The above keeps the user on the same page but scrolls to the section <div id="projects"></div>
Don't use this, if your are using React Router V4 it's not what you are looking for.
http://localhost:8080/hello displays cannot get http://localhost:8080/hello
You probably don't have a dev server running that supports front-end routing. If you don't, basically what is happening is that by pressing enter you tell the SERVER to serve you page, http://localhost:8080/hello. You don't want this, the server should be passive here and not serve you any other page then your main index.html. So, instead, you want the server to give you http://localhost:8080 and by doing so, it loads your main index.html and scripts, then react takes over, react-router checks the url and it then renders you the /hello route with the Hello component.
In order to achieve this make sure you have webpack-dev-server installed. You can do this by typing the following in the command line.
npm install webpack-dev-server --save-dev
Then add the following to your package.json
devServer: {
publicPath: '/',
historyApiFallback: true
}
// add the below line to the scripts section
"start:dev": "webpack-dev-server"
This basically tells the dev-server to re-route all requests to index.html, so react-router takes care of the routing. Here's more on Webpack-dev-server.
Then in your terminal run npm run start:dev to start the development server.
I hope this all makes sense and with these guidelines you're able to make your code work. If not let me know ;)
NOTE: Alex has a good point as well. React Router v4 renders all routes that match. So, if the path is http://localhost:8080/hello
/ and /hallo both match and will render. If you only want to render one, use exact as Alex mentions, or wrap your routes in a <Switch> component.
<Switch>
<Route path="/" component={App}/>
<Route path="/hello" component={Hello}/>
</Switch>
Here's what the react-router docs say.
Renders the first child or that matches the location
UPDATE:
After the OP uploaded a repo with the problem, the following was corrected to make the routes work. If anyone is interested, the fixed project is on GitHub.
Main points to make the project work:
Use react-router-dom instead of react-router
Tell Express route all incoming traffic to index.html app.get("/*", (req, res) => res.sendFile(__dirname + '/public/index.html'));
Use <Switch> and <Route> components to setup the routes as described in the question. See code here.
Try to use exact directive:
<Route exact path="/" component={App} />
See API doc: https://reacttraining.com/react-router/web/api/Route/exact-bool
This is the first time I tried react.
I create a project using create-react-app, then for routing, I use React Router V4 for web react-router-dom.
This is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
There's no problem when I start the server with npm start. But when I build the app with npm run build, putting it in my www folder in my Apache server and access it, I only get empty page with <!-- react-empty: 1 --> inside my root div.
<div id="root">
<!-- react-empty: 1 -->
</div>
I have tried looking for similar cases, but the answer always about adding historyApiFallback in webpack.config.js or gulp, which I can't find anywhere in the create-react-app template.
I have tried HashRouter, it's working fine, but there's /#/ in the url which is undesirable.
How can I get the BrowserRouter to work after I build the app?
Well, there was no problem at all. It worked, even if it was built using npm run build. My best guess is: you placed the files in the wrong folder.
When you build your code using npm run build, the static folder should be placed inside the MallApp folder. So your folder structure should be like this:
/var/www/mywebfolder/index.html
/var/www/mywebfolder/MallApp/static
Check your browser's console, I believe it contains errors. Failed to get the js and css files.