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;