Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rewrites and redirects in AWS amplify

Tags:

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.

enter image description here

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.

like image 768
Shantanu Tomar Avatar asked Feb 01 '19 10:02

Shantanu Tomar


People also ask

What is the difference between URL rewrite and redirect?

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.


2 Answers

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)$)([^.]+$)/>

configured in Rewrites and redirects in the Amplify settings:

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.

like image 105
mvladk Avatar answered Oct 06 '22 01:10

mvladk


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 enter image description here

Also read for reference: https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html

Hope it helps

like image 44
Navdeep Singh Avatar answered Oct 05 '22 23:10

Navdeep Singh