First attempt at AWS Amplify with NodeJS gives 404 page not found

Question

When go to the url given, something like this: https://master.xyz.amplifyapp.com/, I get 404 page not found. I don't need my own domain for this proof of concept. I also tried https://master.xyz.amplifyapp.com/poc (see my directory structure below). Same result.

Previous steps taken:

1. The directory was originally created by doing a clone of an empty AWSCodeCommit repository.

2. I ran create-react-app poc, and when I do npm start in the "poc" directory, it shows fine in the browser with this url: http://localhost:3000/ (Note at bottom of this post, I did the same thing with a NodeJS RESTAPI and got the same result).

3. This is my directory structure, and from there I did:

   git add -all git commit -m"first checking" git push

In AWSCodeCommit I can browse the repository and see the code there.

4. This is the result of connecting CodeCommit to Amplify:

I'm expecting to see the same thing from the provided URL (https://master.xyz.amplifyapp.com/) as I do on my local machine (localhost:3000).

5. I had one idea. I copied the poc directory up to the main directory, committed, pushed, saw it rebuild/deploy, and tried again, but same result.

NOTE: I have gone through the same exercise with a simple NodeJS REST API. It also gets the "page not found".

Local: http://localhost:8080/api/books returns: [{"title":"Harry Potter","id":1},{"title":"Twilight","id":2},{"title":"Lorien Legacies","id":3}]

With Amplify: https://master.xyz.amplifyapp.com/api/books gives "404 page not found".

I was thinking the problem with the React was that it was a regular React app, and not a Native-React application. But now I'm getting same issue with a simpler nodeJS application, and no idea what to try next.

Answer 1

I ran into the same issue. I deployed my node/astro web app without no initial settings because I thought the configuration was going to be automatic. Well...it wasn't. I fixed my 404 issue by modifying the amplify.yml file.

When you first deploy the application, there is a warning sign that say to verify the build output directory: aws amplify deployment configuration

As you can see for my case, I had to add the dist/ directory to be served and ...voila. Everything was working. Hope this helps!

Answer 2

Improving the answers and providing another option for this I followed the link provided in here for SPAs, in case to be used ina ViteJS, using typescript and react.

adding a redirect rule on the AWS amplify console:

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

/index.html

status code 200