Is it possible to host React JS/ Node JS project inside the AWS S3 without using AWS CDN because my CDN is currently hosted at Cloudflare and it can be a problem to migrate my DNS to AWS DNS.
I have attempted to setup a AWS S3 bucket and set it as static hosting purpose and generate production build from my React JS project.
But I keep enouncter access denied error when I accessed the generated AWS S3 bucket hostname.
May I know how can I resolve this?
I have followed this resource.
But my React App still not working properly. If it is working properly, it should redirect me to https://s3.hosting.com/ with present the view that I specify in the react router.
Below are my code snippet for index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
let app = document.getElementById('root');
history.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
setTimeout(() => {
history.replace(path);
}, 100);
}
});
// 2. Render our app
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,app);
reportWebVitals();
Below are my code snippet for App.js
import './react-datepicker.css';
import './App.css';
import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ViewOrder from "./components/vieworder";
import CreateOrder from './components/createorder';
import ViewAllOrder from "./components/viewallorder";
import ViewRestaurant from "./components/restaurant";
import ViewBranches from "./components/branch";
import ViewBranchOrder from "./components/viewbranchorder";
import ViewAllConsumer from './components/consumer';
import Auth from "./components/auth";
import Profile from "./components/profile";
import ViewTransaction from "./components/transaction";
import ViewAccessToken from "./components/viewaccesstoken.js";
import NotFoundPage from "./components/notfoundpage";
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
class App extends Component {
render(){
return (
<Router>
<Switch>
<Route exact path="/auth" component={Auth} />
<Route exact path="/" component={Auth} />
<Route exact path="/order" component={ViewAllOrder} />
<Route exact path="/transaction/user/:userId" component={ViewTransaction} />
<Route exact path="/token/:userId" component={ViewAccessToken} />
<Route exact path="/transaction" component={ViewTransaction} />
<Route exact path="/order/v/:orderId" component={ViewOrder} />
<Route exact path="/storeFront/:storefrontToken/order/create" component={CreateOrder} />
<Route exact path="/consumer" component={ViewAllConsumer}/>
<Route exact path="/restaurant" component={ViewRestaurant}/>
<Route exact path="/profile" component={Profile}/>
<Route exact path="/profile/:uid" component={Profile}/>
<Route exact path="/ViewBranches" component={ViewBranches}/>
<Route exact path="/restaurant/:restaurantId/branch" component={ViewBranches}/>
<Route exact path="/restaurant/:restaurantId/branch/:branchId/:branchName/order" component={ViewBranchOrder}/>
<Route exact path="*" component={NotFoundPage}/>
</Switch>
</Router>
);
}
}
export default App;
Related
I am having a react-router problem in production build. Every thing works fine in development, but whenever I build a production using npm run build and then open the index.html file in the build folder, I only get the Header and Footer portion of the website, and when I try navigating to the links on the header I get an error that says "your file could not be accessed". Navigating to the Home link takes me to the c: directory on computer instead of just reloading the page I was on.
I have no idea what's going on. But I believe it might be from the Router.
Thank you.
Here is the code:
router.js
import {
BrowserRouter,
Routes,
Route,
} from 'react-router-dom';
import Home from '../components//pages/home';
import Infra from '../components/pages/infra';
import Outreach from '../components/pages/outreach';
import AboutUs from '../components/pages/aboutUs';
import ProgressOfWork from '../components/pages/progressOfWork';
const Router = () =>
<BrowserRouter basename=''>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="infra" element={<Infra />} />
<Route path="outreach" element={<Outreach />} />
<Route path="aboutUs" element={<AboutUs />} />
<Route path="progressOfWork" element={<ProgressOfWork />} />
</Routes>
</BrowserRouter>
export default Router;
App.js
import Router from './routes/routes';
import Header from './utilities/header';
import Footer from './utilities/footer';
function App() {
return (
<div>
<Header />
<Router />
<Footer />
</div>
);
}
export default App;
index.js
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')
);
I have my application that works with a hash router with routes like "login" "register" "dashboard" and I would like to integrate react-admin. I would like to use react admin on my /admin route.
What I do:
App.js
import React, {Component} from 'react';
import {HashRouter as Router, Route} from 'react-router-dom';
import {Provider} from 'react-redux'
import Store from './store/configureStore'
import RegisterView from "./view/RegisterView"
import LoginView from "./view/LoginView"
import DashboardView from "./view/DashboardView"
import AdminView from "./view/AdminView"
import jsonServerProvider from "ra-data-json-server";
import { Admin, Resource, BooleanField } from "react-admin";
import { UserList, UserEdit, UserCreate } from './users';
const dataProvider =
jsonServerProvider("https://jsonplaceholder.typicode.com");
class App extends Component {
// Provider store is used to use the store of the redux
// Router is used to define the route and the component to display
render() {
return (
<div>
<Provider store={Store}>
<Router basename="/">
<div>
<Route exact path="/" component={LoginView}>
</Route>
<Route exact path="/register" component={RegisterView}>
</Route>
<Route exact path="/login" component={LoginView}>
</Route>
<Route exact path="/dashboard" component={DashboardView}>
<Route exact path="/admin" component={AdminView}>
<Admin dataProvider={dataProvider}>
<Resource
name="users"
list={UserList}
edit={UserEdit}
create={UserCreate}
/>
</Admin>
</Route>
</div>
</Router>
</Provider>
</div>
);
}
}
export default App;
it displays my react-admin but with my other components (display bug). I would like the react-admin part only in my /admin routes.
For me, the section should only be working in the /admin because i gave this path to my route.
What don't I understand?
Very new to react, I'm trying to separate the landingpage, login/signup and the app in react router but I cant to make it work, the page always loads the layout of the landing page and under it the login.
// Imports
import 'bootstrap/scss/bootstrap.scss';
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router, Route
} from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
// Data
import Landing from "./components/landing/landing";
import login from './components/app/auth/login';
// App
const Root = () => (
<Router>
<Route path="/" component={Landing} />
<Route path="/login" component={login} />
</Router>
)
ReactDOM.render(
<Root />,
document.querySelector("#root")
)
// Service worker
serviceWorker.unregister();
You have to use exact path within the component. It will look like <Route exact path="/" component={Landing} />
The same goes for the login page.
I am in the process of migrating my React App from React-Router-3 to React-Router-4 and I am having a few issues. The layout of my application is as follows.
build
node_modules
public
src
AboutScreen
ContactScreen
HomeScreen
LoginScreen
SignUpScreen
WorkRequestScreen
App.js
index.js
routes.js
serviceWorker.js
package.json
package-lock.json
I am getting the following error:
./src/index.js: Line 8: Unexpected use of 'history' no-restricted-globals
When I remove the history={history} from index.js, I get the following error.
TypeError: Cannot read property 'location' of undefined
I have been following the following tutorial to migrate from 3 to 4.
https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a
My route.js looks like this:
import React from 'react';
import { Route, Redirect, Router, Switch } from 'react-router-dom';
import createHashHistory from 'history/createHashHistory';
import App from './App';
import Home from './HomeScreen/Home';
import WorkReq from './WorkRequestScreen/WorkReq';
import About from './AboutScreen/About';
import Contact from './ContactScreen/Contact';
import Login from './LoginScreen/Login';
import Signup from './SignUpScreen/Signup';
const history = createHashHistory();
const routes = () => (
<Router history={history}>
<Switch>
<Route exact path="/workReq" component={WorkReq}/>
<Route exact path="/about" component={About}/>
<Route exact path="/contact" component={Contact}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/signup" component={Signup}/>
<Route exact path="/" component={Home}/>
</Switch>
</Router>
);
export default routes;
My index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Route, Redirect, Router, Switch } from 'react-router-dom';
import routes from './routes';
ReactDOM.render(<Router history={history} routes={routes}/>,
document.getElementById('root'));
serviceWorker.unregister();
Passing history explicitly isn't required as Route is passed history implicitly as prop. 1
I'd remove history prop passed to Router from the index.js and also remove it from Router in routes.js
What should I change in my config/routes.js file to make it use modules/router files written for the React front-end ?
config/routes.js file:
module.exports: {}
module/router.js:
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from './App'
import About from './About'
import Repos from './Repos'
import Repo from './Repo'
import Home from './Home'
module.exports = (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Route>
)
I am using webpack, babel for bundling. Really stuck with this.
Currently, the first page is rendered by assets/index.html but if I refresh from any other page (whose address is not /), I get 404 from the server, even though the path is defined in the react router file.
Please help.
EDIT
Here's my index.js file (serves as the React entry point):
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
render(
<Router routes={routes} history={browserHistory}/>,
document.getElementById('app')
)