CODEWITHSUNDEEP
reactjsroutesaws-amplifystatic-html
brent
brent

Reputation: 131

Routing to static HTML using React and AWS-Amplify

I have built a website using React and am now using AWS-Amplify to host it. I am trying to setup Routes that redirect to static HTML files which are located in the /public directory. Everything works just fine when I test locally, but the Routes don't work after the site has been deployed.

This is what I have for my Routes.

<BrowserRouter>
    <Routes>
        .
        . // Other unrelated Routes here..
        .
        <Route path="/page1" render={() => {window.location.href="page1/index.html"}} />
        <Route path="/page2" render={() => {window.location.href="page2/index.html"}} />
        <Route path="/page3" render={() => {window.location.href="page3/index.html"}} />
    </Routes>
</BrowserRouter>

My rewrites and redirects setting for 200 (Rewrites) is currently:

</^[^.]+$|\.(?!(html|css|gif|ico|jpg|jpeg|js|png|PNG|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

The console doesn't give any warnings or errors whenever I try to access these static HTML files from the deployed site, but a null page is loaded. Is there some settings I need to modify on my Amplify application? Thanks!

Upvotes: 1

Views: 1724

Answers (2)

senerdude
senerdude

Reputation: 118

From the AWS Amplify console left sidebar under App Settings, click Rewrites and redirects.

click "Edit" on the right-hand side and in the same place click "Open text editor"

your configurations should be something like the below.

[
    {
        "source": "/static-folder-in-public/<*>",
        "target": "/static-folder-in-public/<*>",
        "status": "200",
        "condition": null
    },
    {
        "source": "/static/<*>",
        "target": "/static/<*>",
        "status": "200",
        "condition": null
    },
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|xml)$)([^.]+$)/>",
        "target": "/",
        "status": "200",
        "condition": null
    }
]

Upvotes: 1

scription
scription

Reputation: 1

Try removing your react-router entries and adding some rewrites/redirects in amplify console for something like:

/page1 /public/page1/index.html 200

/page2 /public/page2/index.html 200

This may give you some ideas for a solution using rewrites/redirects. I've used it myself but not sure on how maintainable it is going forward.

Upvotes: 0

Related Questions