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.
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 created a new React JS app using the Visual Studio 2022 Project Template "Standalone JavaScript React Template"
When I run the project I see the react logo just like when you use "create-react-app" (I'm assuming that Visual Studio 2022 creates the project in the same way)
I want to use Bootstrap in my project so I installed the module by going to the root directory of the project and typing "npm install bootstrap" I can see that the module is installed in the package.json
When I try and import bootstrap in my index.js using this line:
import "/bootstrap/dist/css/bootstrap.min.css";
Then run the app I get this error:
Module not found: Error: You attempted to import /bootstrap/dist/css/bootstrap.min.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/
My question is what is the correct way to import and use bootstrap in my project, did I install it in the right way or is there a diffrent method?
This is my full index.js file for clarity:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "/bootstrap/dist/css/bootstrap.min.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
UPDATE: See sctructure of project
Multiple people (like asked here) have asked the same question but I couldn't resolve my problem as almost all the solutions asked me to check for mistakes while importing but I am sure I went through all of them but couldn't find anyone that made sense to me. My code used to be much bigger but as someone mentioned in the solution to the post I have tagged previously, I created a new app using CRA and imported things one by one only to realize that this error started appearing as soon as I imported the routing method as mentioned in my code.
I am aware that this error is pointing to the broken symlinks in my system as mentioned in some other posts(also pointed to another symlink when I previously ran my code) but I am trying to find a way to resolve this without damaging my system by deleting symlinks.
After using CRA to make a new app I tried to run this code which worked fine until I imported Router.
edit: As soon as I removed routing from my initial project (which had multiple components ) it got fixed. I need to figure out a way to route this now.
My index.js CODE :
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import {BrowserRouter as Router} from'react-router-dom';
render(
<Router>
<App />
</Router>,
document.getElementById('root') );
My App.js CODE :
import React from "react";
function App()
{
return(
<h1> hello world </h1>
)
}
export default App;
PS: Thank you for reading my post, please post your solutions or links that might help.
You are probably missing #material-ui/icons
Try to install it
npm install #material-ui/icons
In my case an import statement was missing a file. Check your import statements. It actually shows what's missing for a second on the Compiling... screen after npm start
I create a small React application using npx create-react-app my-app. I would like to add this React application to my existing website in a specific <div>.
My website:
<div id="reactApp"></div>
In React, I have index.js as
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
//document.getElementById('root')
document.getElementById('reactApp')
);
reportWebVitals();
Then, I build the application npm run build. It generates the following files (image below) in static folder. Do I need to add all these .css and .js files to my main website to make it work?
Convert your project my-app to a web component and then add it to the other react application (you can add it to any other web application).
More details on how to create web components can be found here
https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1
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