Vuepress: clean-url plugin breaks Netlify deployment

[vladfaust]

• [x] I confirm that this is an issue rather than a question.

Bug report

Version

alpha.40

Steps to reproduce

Visit https://compassionate-benz-c091d6.netlify.com/getting-started

What is expected?

A rendered page equal to https://docs.onyxframework.org/getting-started

What is actually happening?

Both websites are deployed via Netlify. https://docs.onyxframework.org is deployed from master branch, https://compassionate-benz-c091d6.netlify.com — from bug branch. The only difference is that the clean-urls plugin enabled in bug branch as seen here: https://github.com/onyxframework/docs/compare/bug.

See https://github.com/onyxframework/docs for the source code.

Other relevant information

• The bugged deployment works normal if firstly going to https://compassionate-benz-c091d6.netlify.com (the root page) and then navigate with clicks
• "index" pages like https://compassionate-benz-c091d6.netlify.com/rest/ are working normally, however, the "normalSuffix" pages are broken, e.g. https://compassionate-benz-c091d6.netlify.com/rest/routing
• Netlify asset optimization is disabled in both cases
• No _redirect file is present in neither of deployments

[Shigma]

I admit that I did not clarify this in the document and I will add some caveats to it.

VuePress does not have the right to modify server identification. If you want your URLs to follow a certain pattern (e.g. /rest/routing instead of rest/routing.html or rest/routing/), you should make sure that your server would treat it as an HTML. So this question is not in the scope of VuePress.

However, I still don't know why plugin-clean-urls works in your master branch. @jjyyxx

Here is a related issue: #1382.

[vladfaust]

@Shigma I see. Handling pages as HTML is a server's responsibility.

However, I still don't know why plugin-clean-urls works in your master branch

The thing is that I actually do not have this plugin enabled in the master branch. I double-checked that Netlify has asset optimization disabled (and even forcibly re-deployed the site). Still, https://docs.onyxframework.org/getting-started is working (but immediately gets redirected to https://docs.onyxframework.org/getting-started.html). So, looks like it's some Netlify stuff.

Nevertheless, is it somehow possible to make https://docs.onyxframework.org/getting-started links work without redirecting to .html (so the link stays pretty in the address bar) on Netlify? I'd be happy if someone could help me with that...

[Shigma]

@vladfaust

Most of the servers will automatically handle some redirects, e.g. when /foo does not exist:

• /foo -> /foo.html if exists
• /foo -> /foo/ if exists

(And to behonest, #1269 does not work on any server.) So if you want a /foo without redirection on Netlify without additional configuration, make sure:

• /foo exists, and
• /foo.html and /foo/ does not exist

[vladfaust]

@Shigma in my case on master branch the dist folder looks like this:

.
├── getting-started.html

Both https://docs.onyxframework.org/getting-started.html and https://docs.onyxframework.org/getting-started work.

And the bug branch (with clean-urls enabled) dist folder looks like this:

.
├── getting-started

Neither https://compassionate-benz-c091d6.netlify.com/getting-started nor https://compassionate-benz-c091d6.netlify.com/getting-started.html work.

This falls under your advice:

make sure:

• /foo exists, and
• /foo.html and /foo/ does not exist

But does not work. Netlify doesn't want to treat getting-started as an HTML page.

[alberthaff]

I made a little hotfix-script.

Place following in your package.json

"scipts": {
  "build": "vuepress build; npm run urls:pretty",
  "urls:pretty": "find ./.vuepress/dist ! -path './img*' ! -path './assets*' ! -name '_redirects' ! -name '*.*' -type f -exec bash -c 'mv $1 $1.temp; mkdir $1; mv $1.temp $1/index.html' - {} \\;"
}

and run npm run build as usual. The script renames all page from getting-started to getting-started/index.html. It works fine on ngx-buoy.com (hosted with Netlify),

You'll might have to adjust the filter of the script, so that it doesn't rename your assets, etc.

You have to disable Netlify's "pretty URLs" to get rid of the trailing slashes

[brianmercer]

Another workaround for using the clean-url plugin with netlify. Set the content-type header in netlify.toml or a _headers for your specific paths, i.e. netlify.toml:

[[headers]]
  for = "/posts/*"
  [headers.values]
    Content-Type = "text/html; charset=utf-8"
[[headers]]
  for = "/about"
  [headers.values]
    Content-Type = "text/html; charset=utf-8"

However, I do still think this is a bug. You should be able to set the path as /posts/my-page and have vuepress write out /posts/my-page.html. That is the typical solution for non-spa static files and hosts have server rules to handle that. I don't see how a plugin can solve that since when vuepress renders the page the filename is based on the path, even if regularPath still has the html extension.

{ "title": "Test Page", "frontmatter": { "title": "Test Page" }, "regularPath": "/posts/test.html", "relativePath": "posts/test.md", "key": "v-27be7c86", "path": "/posts/test" }

[slanden]

The problem with setting Netlify headers is that your own CSS for the page doesn't get rendered, only the browser defaults. At least, this was my experience.