Website page won't show and I need help troubleshooting if possible

Hi there,

When I try to access the user page on my quizzer website (Quizzer) using either the guest or custom account log in, I’m getting an error saying: Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site. (Quizzer)

The website worked perfectly in development, so I’m wondering why netlify isn’t handling it well. Can I please get some assistance with getting my site back online?

Thanks in advance

@Emi_3 Instead of asking if you can get assistance, and “seeing if someone bites”, you should provide the details that someone passing by could use to help you.

In this case, if you can provide access to the repository, someone can probably help.

If you post a message like you have so far, then someone like me has to say, “can you please provide more details”.

1 Like

Hi there, glad you found us :wave:t6: before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “example-jones.netlify.com
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console
1 Like

Hi Nathan, It’s my first time here and I wasn’t sure how much information you needed (I thought I gave enough.) “Seeing if someone bites” wasn’t my intention at all. You have my apologies for that.

The repository is here: https://github.com/JayGameDev/Quizzer-Website/tree/main

Let me know if I need to provide anything else for next time :+1:

Okay, thank you Sam!

@Emi_3 It’s fine, it’s just common for those seeking assistance to start by “asking if they can have assistance”, which while “polite”, slows down how fast you get helped.

For future reference here, or anywhere, the fastest way for help with any technical questions is to front-load your post with as many details as you can:

  1. What you’re working with, (the platform, system, framework, language info)
  2. What the issue is, (where you’re seeing it, any error logs)
  3. What you suspect it may be
  4. What you’ve already tried
  5. Access to the code or a minimum reproducible example or steps to recreate

If you write a detailed post you will find that it can act like Rubber duck debugging and you’ll solve your own problem before you even hit “post”.

It’s not usually possible to discern why an error is occurring from output alone, so you’ll often need to provide source code, especially in situations with claims along the lines of “it works locally”. As the easiest way for someone to confirm that, is to pull it down and try themselves.

Your repository is set to private, so I’ve not been able to access it.

Can you please change the repository visibility.

2 Likes

Okay, the repository is public now. Let me start by going down the list of details to hopefully narrow things down

  1. I’m working on windows/vscode
  2. As stated before, my issue is that I’m getting the apparently infamous “Page not found” error when switching to a new page. (https://quizzer-application.netlify.app/logged-in.html)
  3. I’m not all that sure what the fix might be, I’m still quite new to both git and netlify
  4. I have done a little research, watched a few tutorials and the fix was supposed to be adding a “_redirects” file, but that hasn’t worked for me
  5. Going to any page outside of home produces the issue now (https://quizzer-application.netlify.app)

@Emi_3 The rule that you’ve added in the _redirects file is for when the output is a Single Page Application (SPA), and is to ensure that any routes which don’t actually exist as files, are served the main index.html file.

You can tell it’s not working though, since you’re getting the standard Netlify 404 page, and the reason it’s not working is due to where the file is placed. You have the _redirects file in the root of your repository, but it needs to be in the folder that you’re deploying, in this case /dist/.

Additionally, you can see that your build doesn’t produce a logged-in.html file…

image

So once you move the _redirects file, (which you can do however you would like with Parcel, or by using a copy command after Parcel has executed), I would expect that what you would find accessing the /logged-in.html path would return the contents of the /index.html file… which is likely still not what you want.

1 Like

In addition to what @nathanmartin has said, if you build the project locally (which I did) you’ll notice the logged-out.html file doesn’t exist in the dist directory. This is because you haven’t explicitly told Parcel to build it and as it isn’t reference in another file (as sign-in.html is in index.html) Parcel doesn’t automatically include it.

The answer to this is to change the build command as outlined this post on Stack Overflow

I.E.

parcel build *.html --dist-dir ./dist

The issue is nothing to do with git or Netlify, rather the configuration of the project itself. It is also nothing to do with redirects/rewrites.

@jasiqli I believe you mean logged-in.html, but you’re entirely correct, I’d forgot to mention that there is in fact a logged-in.html file in the root, but that it’s not currently ending up in the /dist folder due to the way that Parcel works.

@Emi_3 One way to test what will happen on Netlify is to run your build command locally, go into the /dist folder and then run npx serve, in the case of a build like this which doesn’t actually need redirects or any middleware, if your build works when served as static files, it will work on Netlify.

1 Like

Ah yes, logged-in.html. Perhaps it’s time I logged out for a while :smiley:

Ohhhhh I see… Ok, I just ran the

npx parcel build ./*.html

command from “npm - deploying problem with multiple html files. Parcel - Stack Overflow” as suggested by @jasiqli so that parcel can add the missing files.

I also put _redirects into the dist folder in my latest commit using drag and drop. That’s okay, isn’t it? Or do I need to add it using commands?

Regardless, you said it wouldn’t matter here so I’m not too concerned. I’m going to try the “npx serve” command now and update y’all on the results

The _redirects file isn’t in your repository anymore, your most recent commit deleted it.

Your .gitignore understandably has dist specified in it, to prevent output files from ending up in the repository.

Usually you would copy the file into the dist as part of your build, to ensure a reproducible build that doesn’t rely on any artifacts, so if the dist folder is completely destroyed, running the build produces everything you need for a deployment.

1 Like

Okay, thanks for letting me know. I just fixed the repo now. After running the program through netlify, looks like it might be working now. Npx serve seems to be working too!

I really appreciate the help from both you and @jasiqli :smile: While I didn’t understand the deployment process that well before, I think I’m finally starting to get it thanks to y’all. I’ve been stuck here for a good minute, so I’m quite happy I could finally get some assistance. I’ll also make sure to keep note of the advice regarding parcel as well

1 Like