Vuepress: Allow devServer to serve cleanURL

[octref]

Feature request

What problem does this feature solve?

When requesting /about, serve /about.html without redirect.

What does the proposed API look like?

In config.js, have cleanURL: true by default.
When enabled, it will serve Clean URL like surge.sh or zeit's serve.

How should this be implemented in your opinion?

Some rule rewrites in the webpack-serve or koa part.

Are you willing to work on this yourself?

Don't have enough time, sorry.

[Gangwolf]

😄 I was just about to open an issue on this, would be a great API! Btw, just as a quick add on, I noticed that having a path serve as a page and as a directory works only if a trailing slash is used:
.
├─ articles
│ ├─ README.md
│ └─ some-article.md

'/articles' => Returns only \ '/articles/' => Returns all appropriate components for README, renders correctly
'/articles/some-article.html' => Returns all appropriate components for some-article, renders correctly

Perhaps this can be addressed with this issue as well...

[ulivz]

@octref In favor of that, and we need to distinguish these two different scenarios:

• Source file: /about/index.md, serve /about/index.html
• Source file: /about.md, serve /about.html

@Gangwolf /articles isn't a semantic URL for /articles/REAMD.md, so please make sure that it URL ends with a slash.

[octref]

@ulivz I think surge's rule for handling this is pretty straightforward: https://surge.sh/help/using-clean-urls-automatically

For request /foo

• Serve /foo.html
• If /foo.html isn't available
  
  
  
  • Redirect to /foo/
  
  
  • Serve /foo/index.html, which can be either /foo/index.md or /foo/readme.md
  
  

For request /foo/

• If /foo.html is available
  
  
  
  • Redirect to /foo
  
  
  • Serve /foo.html
  
  
• If /foo.html is not available but /foo/index.html is, serve that, which can be either /foo/index.md or /foo/readme.md

[octref]

@Gangwolf
And for the request /articles, if /articles.md is available it should serve that. Otherwise it should redirect to /articles/ and serve the compiled html from /articles/[index|readme].md

[ulivz]

@octref Awesome!

Maybe I need spend time researching whether all other mundane uses can also support such features, e.g. Github Pages / netlify.

[octref]

Netlify also supports it https://www.netlify.com/docs/redirects/#trailing-slash

I do think GitHub support it too.

[ulivz]

Cool, let's plan for it.

[Gangwolf]

@ulivz @octref, thanks for clarifying 👍

[awulkan]

Isn't there a drawback to this though? The redirects on the webhosts will cause a full page reload. This is not really what we want. Because the dev servers behavior will differ from the deployed sites behavior, and it won't be able to take advantage of client side routing.

Wouldn't it be better to generate a file structure for clean URLs when building? So that the site enables clean URLs by default, to take advantage of the client side routing.

[Wangszzju]

@octref Hey, My opinion of the issue is same to you！
Would you please check my Pull Request and give me some suggestion？That's my solution but I'm not sure whethor the solution is elegant or not.

[Wangszzju]

@meteorlxy
since the issue #720 has been closed, maybe we can have discussion here?
I also think url without trailing slash looks better. However, when you have these files:

• /config.md
• /config/README.md
  If you have both of them, of course the url /config and the /config/ should be different.However, if you have only one of them, maybe we really need redirect?
  I sincerely wonder what your opinion about the situation is.

[ycmjason]

I don't understand why it matters how the URL looks in devServer. You can set this up in prod easily if you wish.

[ycmjason]

IMHO, introducing this might incur unnecessary complexity in the URL resolving logic. I prefer to keep this simple and straightforward.

[octref]

@Wangszzju

https://github.com/vuejs/vuepress/issues/603#issuecomment-398472571

@ycmjason

It's not just how the URL looks. It's how the devServer behaves.

For me, I prefer to organize subpages like this:

file -> dist -> url
/posts/foo.md -> /posts/foo.html -> /posts/foo
/posts/bar.md -> /posts/bar.html -> /posts/bar
/posts/baz.md -> /posts/baz.html -> /posts/baz

But now when I request /posts/foo on devServer, it redirects to /posts/foo/ and try to serve /posts/foo/index.html. That causes 404 and is inconsistent with my prod server.

If I organize my file like this:

/posts/foo/index.md
/posts/bar/index.md
/posts/baz/index.md

It at least works on devServer, but now I end up with URL with ugly trailing slashes.

[mathiasbynens]

FWIW, Firebase supports this too through the cleanUrls setting: https://firebase.google.com/docs/hosting/full-config#cleanurls

It would be great to have the dev server support “clean URL” behavior as available on all these hosting platforms.

[ulivz]

Before actually starting to support this feature, I created a PR: feat($core): redirects for clean urls as a transition solution.

[Shigma]

Fixed.