I am new to AWS deployment
and trying to deploy both Backends (NodeJS, Express, MongoDB
) and Frontend(React/Redux
) code to AWS. I am using AWS Beanstalk
for backend and AWS amplify
for Frontend code. I have completed the backend deployment and tested it using postman and even testing the API's by running frontend at http://localhost:3000/
. I have deployed the code on AWS amplify also but seems I am not aware of the Rewrites and redirects
it uses so that the app can navigate to different URL's. Mine is a SPA
. I can see the login screen but once I enter the credentials it dosen't navigate to protected(Using JWT Auth
) URL.
My app on amplify is hosted on : https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/
App.js -> Contains different routes. Apart from /login
and /register
all the routes have to be checked first using PrivateRoute and then can render the Homepage. I declared BASE_URL = host but I am not sure how I can use it that to navigate on different URL's
// const BASE_URL = "https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com";
class App extends Component {
render() {
return (
<div className="App">
<MessageSnackbar />
<Router history={history}>
<Switch>
<PrivateRoute
exact
path={`/`}
renderFunc={routeProps => <HomePage {...routeProps} />}
/>
<Route path={`/login`} component={Login} />
<Route path={`/register`} component={Register} />
</Switch>
</Router>
</div>
);
}
}
export default withTheme()(App);
I have below configured in Rewrites and redirects in the Amplify settings.
manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
The issue is that nothing loads as of now when I hit :
https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/index.html
OR
https://url-resolve-changes.d1z993fyobkz3s.amplifyapp.com/
The backend URL though is correctly configured as when I send the request from http://localhost:3000/
the API's are working fine. It's just the redirecting part I am missing. Do let me know if any other details are required.
Appreciate your help. Thanks in advance.
Simply put, a redirect is a client-side request to have the web browser go to another URL. This means that the URL that you see in the browser will update to the new URL. A rewrite is a server-side rewrite of the URL before it's fully processed by IIS.
I had a problem when refreshing page with route path, received response AccessDenied, caused by S3 does not really have that path or file. Got this question first on search result, so posting my solution here.
Resolved the issue by:
Original address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
Redirects for single page web apps (SPA)
Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html except for the specific file extensions specified in the regular expression.
While I reshared your question on https://twitter.com/nswebstudio/status/1149276084304613376 I figured it out its amplify.yml issue. I corrected my Build path as follows
baseDirectory: build
Complete amplify.yml file screenshot
Also read for reference: https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html
Hope it helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With