Page Not Found error when using a static index.html #9146

mdecimus · 2023-07-12T14:03:42Z

Have you read the Contributing Guidelines on issues?

I have read the Contributing Guidelines on issues.

Prerequisites

I'm using the latest version of Docusaurus.
I have tried the npm run clear or yarn clear command.
I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
I have tried creating a repro with https://new.docusaurus.io.
I have read the console error message carefully (if applicable).

Description

Custom index.html pages placed under 'static/` are ignored and a Page Not Found error is returned.

Reproducible demo

https://stackblitz.com/edit/github-34byye?file=static%2Findex.html

Steps to reproduce

Follow the instructions at https://v1.docusaurus.io/docs/en/site-creation#docs-landing-page:

Remove the index.js file from the website/pages directory, if it exists.
Add a custom static index.html page in the website/static directory with the following contents:

<html>
 <head>
 </head>
 <body>
   <h1>Hello World<h1>
 </body>
</html>

Expected behavior

Custom HTML should be rendered when accessing https://host:3000/

Actual behavior

A Page Not Found error is generated:

Page Not Found
We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

Your environment

Public source code:
Public site URL:
Docusaurus version used:
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

I'd be willing to fix this bug myself.

The text was updated successfully, but these errors were encountered:

vennilamahalingam · 2023-07-14T06:18:13Z

Hello,

I was able to reproduce the issue and I am willing to work on this issue.

Josh-Cena · 2023-07-14T07:17:41Z

What is your Docusaurus version? Are you using v1?

Josh-Cena · 2023-07-14T07:19:22Z

My personal feeling is that it's not a bug, and @vennilamahalingam I don't think you will be able to fix it without some dirty hacks. We can wait for @slorber's opinion.

mdecimus · 2023-07-14T07:22:22Z

@Josh-Cena It happens on the latest version of Docusaurus and also on https://new.docusaurus.io.

I believe it is a bug because the instructions to create a landing page fail with the same Page not found error.

Josh-Cena · 2023-07-14T07:25:51Z

You keep referring to the v1 docs, which is confusing. I can reproduce on the latest version, but it would be helpful if you refer to the latest docs in https://docusaurus.io/docs/creating-pages instead.

In Docusaurus v2+, you should never be using static index.html files; you can simply write JSX in your index.js.

FYI, this is likely a wontfix, because the way Docusaurus works does not allow arbitrary HTML files to be rendered as part of the site without extra effort.

mdecimus · 2023-07-14T07:34:46Z

You keep referring to the v1 docs, which is confusing. I can reproduce on the latest version, but it would be helpful if you refer to the latest docs in https://docusaurus.io/docs/creating-pages instead.

Sorry for the confusion, I did not realize that I was referencing the 1.x documentation but I can confirm I am using version 2.x.

In Docusaurus v2+, you should never be using static index.html files; you can simply write JSX in your index.js.

According to the documentation the index page created from index.js includes all Docusaurus CSS. I need to generate an index without any of the Docusaurus headers, footers or CSS. If that is possible from index.js then that would be a solution.

FYI, this is likely a wontfix, because the way Docusaurus works does not allow arbitrary HTML files to be rendered as part of the site without extra effort.

Other static htmls are working in Docusaurus v2, for example if I place an HTML under /static/test.html it will be available under https://localhost:3000/test. However this does not work for index.html.

vennilamahalingam · 2023-07-14T23:32:51Z

@Josh-Cena Thank you.
@mdecimus Here I am sharing what I understood.

According to the documentation the index page created from index.js includes all Docusaurus CSS. I need to generate an index without any of the Docusaurus headers, footers or CSS. If that is possible from index.js then that would be a solution.

Layout component renders the headers and footer. You can replace the return jsx of the Home component in pages/index.js. Will that suffice your requirement ?

Other static htmls are working in Docusaurus v2, for example if I place an HTML under /static/test.html it will be available under https://localhost:3000/test. However this does not work for index.html.

I use Version 2.x and what works for me is pages/test.js served under https://localhost:3000/test (just as the documentation proposes). No page is served from static folder to me.

Josh-Cena · 2023-07-15T04:24:55Z

Yes, it's a known pain point that you can't remove CSS from a page. The fact that it only doesn't work with landing page is somewhat intriguing. Does it happen in a production build?

mdecimus · 2023-07-15T07:15:04Z

Layout component renders the headers and footer. You can replace the return jsx of the Home component in pages/index.js. Will that suffice your requirement ?

@vennilamahalingam Yes, if I am able to remove Docusaurus' CSS, headers and footers from a page generated by index.js then it's fine. I have a landing page with its own CSS and it breaks when I generate it from index.js.

Yes, it's a known pain point that you can't remove CSS from a page. The fact that it only doesn't work with landing page is somewhat intriguing. Does it happen in a production build?

@Josh-Cena Yes, it happens with the latest version 2 build and also on docusaurus.new. Other static pages work well, the problem it's just with index.html.

mdecimus · 2023-07-15T16:12:13Z

Just a quick update - I was able to show the static HTML by placing it inside an iFrame and changingindex.js to:

export default function Home() {
  return (
    <iframe src="/path/to/your/file.html" title="Description" style={{height: '100vh', width: '100vw'}} />
  );
}

However I'll leave the issue open because this solution is a bit of a hack and I think it would be quite useful to be able to render a static HTML file in scenarios where Docusaurus shares the domain with an existing website that has its own CSS style.

slorber · 2023-07-20T11:02:14Z

The file that will be served in the end is the one that is found at build/index.html

You have 2 source files that are competing to produce that build output index:

src/pages/index.js
static/index.html

If you want to produce the index with a custom html static page, you should delete src/pages/index.js because it takes precedence over the static file.

Once you delete it, if you run yarn build && yarn serve you will get it working:

Now, it still doesn't work with yarn start: that's kind of expected because the dev server does not SSG static pages, it only generates one index.html and server it for all the dev requests that do not match any static file.

This is the code producing the index:

plugins: [
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
          template: path.join(
            __dirname,
            '../webpack/templates/index.html.template.ejs',
          ),
          // So we can define the position where the scripts are injected.
          inject: false,
          filename: 'index.html',
          title: siteConfig.title,
          headTags,
          preBodyTags,
          postBodyTags,
        }),
      ],

I don't think it's worth it to find a workaround to make it work in the dev server (and don't know how), and your use-case should work fine in prod, so let's close for now

mdecimus · 2023-07-20T11:35:41Z

Thanks @slorber , running yarn build && yarn serve did the trick. Would be nice if you can document how to use custom index.html pages for other users with the same need. Thanks!

slorber · 2023-07-20T12:07:07Z

I'm not sure how we can document this properly, this is kind of an edge case.

Also keep in mind that Docusaurus is just a SSG: what you see in build is what you get in prod. In any case doing cp static/index.html build/index.html as a post build step would work, and it's something generic not related to Docusaurus but applicable to any SSG.

If you find an idea/place to document this, I'm open for a PR as long as it does not force most users (99.9% do not need this) to read an extra useless wall of text. Sometimes adding more docs that only 1 person will ever need is the wrong thing to do.

Carseason · 2024-01-21T16:18:40Z

Replacing index.tsx with index.html is a useful feature

mdecimus added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Jul 12, 2023

slorber closed this as not planned Won't fix, can't repro, duplicate, stale Jul 20, 2023

slorber added closed: wontfix A fix will bring significant overhead, or is out of scope (for feature requests) and removed status: needs triage This issue has not been triaged by maintainers labels Jul 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page Not Found error when using a static index.html #9146

Page Not Found error when using a static index.html #9146

mdecimus commented Jul 12, 2023 •

edited

vennilamahalingam commented Jul 14, 2023

Josh-Cena commented Jul 14, 2023

Josh-Cena commented Jul 14, 2023

mdecimus commented Jul 14, 2023

Josh-Cena commented Jul 14, 2023 •

edited

mdecimus commented Jul 14, 2023

vennilamahalingam commented Jul 14, 2023

Josh-Cena commented Jul 15, 2023

mdecimus commented Jul 15, 2023

mdecimus commented Jul 15, 2023

slorber commented Jul 20, 2023

mdecimus commented Jul 20, 2023

slorber commented Jul 20, 2023 •

edited

Carseason commented Jan 21, 2024

Page Not Found error when using a static index.html #9146

Page Not Found error when using a static index.html #9146

Comments

mdecimus commented Jul 12, 2023 • edited

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Reproducible demo

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Self-service

vennilamahalingam commented Jul 14, 2023

Josh-Cena commented Jul 14, 2023

Josh-Cena commented Jul 14, 2023

mdecimus commented Jul 14, 2023

Josh-Cena commented Jul 14, 2023 • edited

mdecimus commented Jul 14, 2023

vennilamahalingam commented Jul 14, 2023

Josh-Cena commented Jul 15, 2023

mdecimus commented Jul 15, 2023

mdecimus commented Jul 15, 2023

slorber commented Jul 20, 2023

mdecimus commented Jul 20, 2023

slorber commented Jul 20, 2023 • edited

Carseason commented Jan 21, 2024

mdecimus commented Jul 12, 2023 •

edited

Josh-Cena commented Jul 14, 2023 •

edited

slorber commented Jul 20, 2023 •

edited