feat(server): add contentBasePublicPath option

[iamandrewluca]

• This is a feature
• Test
• Docs docs(dev-server): fix contentBasePublicPath example webpack.js.org#3291

Tell the server at what URL to serve devServer.contentBase. If there was a file assets/manifest.json, it would be served at /serve-content-base-at-this-url/manifest.json

webpack.config.js

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'assets'),
    contentBasePublicPath: '/serve-content-base-at-this-url'
  }
};

Motivation / Use-Case

Now webpack-dev-server serves static files (contentBase) from root ignoring publicPath
Using added option we can serve static files from publicPath
This use case is needed in create-react-app, when want to serve all files from publicPath
doesn't matter in development or production

https://github.com/iamandrewluca/plsdelete-wds-use-case
Above repo will be deleted because does not reflect current changes after review.
From start the option was intended to be contentBasePrependPublic: boolean

Breaking Changes

No breaking changes

Related

facebook/create-react-app#7259
facebook/create-react-app#6135
facebook/create-react-app#6280

[jsf-clabot]

Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

[codecov]

Codecov Report

Merging #2150 into master will increase coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #2150      +/-   ##
==========================================
+ Coverage   93.86%   93.88%   +0.01%     
==========================================
  Files          34       34              
  Lines        1288     1291       +3     
  Branches      367      368       +1     
==========================================
+ Hits         1209     1212       +3     
  Misses         78       78              
  Partials        1        1

Impacted Files	Coverage Δ
lib/Server.js	97.33% <100%> (+0.01%)	⬆️
lib/utils/normalizeOptions.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update bd6783a...cbb5888. Read the comment docs.

[alexander-akait]

Please provide repo example with use case

[alexander-akait]

Also you need accept CLA

[iamandrewluca]

I signed CLA!

[iamandrewluca]

https://github.com/iamandrewluca/plsdelete-wds-use-case

Set contentBasePrependPublic to false and
publicPath is /test/ but manifest.json is served as /manifest.json
Set contentBasePrependPublic to true and manifest.json is served as /test/manifest.json
If we have some public assets, they should be served from publicPath
This allow to make development and production closer to each other as a configuration.

[alexander-akait]

sounds confused, you want handle static and public directory from one directory, but it is not good idea, why not use publicPath only? Please clarify problem, still can't understand what you want

[iamandrewluca]

for example in create-react-app, you can set env PUBLIC_PATH that allows you to serve app from desired path at development time, but static resources are still served from root.

In this issue is described the use case with example
facebook/create-react-app#6135
https://github.com/PavelPolyakov/CRA-PUBLIC_URL-demo

[iamandrewluca]

you want handle static and public directory from one directory

as I know publicPath does not represents a directory, it's a path segmengt at which your app is served. and all compiled in memory resources are served at that path, and take precedence over static resources (contentBase)

[alexander-akait]

Maybe contentBasePublicPath is better name for this case?

[iamandrewluca]

Now I'm strugling with settings contentBasePublicPath a correct value so app.get will handle correctly express.static

[alexander-akait]

For example:

express.static('public')

handle public directory

[iamandrewluca]

In my app I set contentBasePublicPath: /^\/test\/.*/,
but my files are not served under test path (ex: /test/manifest.json)
If using app.use instead of app.get it serves correctly

[alexander-akait]

Use contentBasePublicPath: 'test', it is not route, it is directory, maybe we should get better name here, anyway let's implement logic and then choose better name

[iamandrewluca]

I think we misunderstood each other.
contentBase is an absolute directory from where to serve
contentBasePublicPath is a route at where to serve

/home/me/project/assets/
  manifest.json

{
  contentBase: '/home/me/project/assets/',
  contentBasePublicPath: '/url-path',
}

localhost:3000/url-path/manifest.json

[alexander-akait]

oh, i see 👍

[iamandrewluca]

@evilebottnawi is there any reason why app.get was used instead of app.use for serving static content?

[alexander-akait]

Because we should handle only GET

[alexander-akait]

@Flydiverny in my todo, next week will be new release, we need help here #2313 for release

[alexander-akait]

/cc @hiroppy can you look at this, i want to merge and do new release

[hiroppy]

LGTM with nits

[iamandrewluca]

@hiroppy it's done!

[hiroppy]

thanks!

[alexander-akait]

Sorry for big delay, we really have very many issues and very few developers

[iamandrewluca]

No problem, we can still do it! 😄

[raix]

Thank you :)

[iamandrewluca]

Released in https://github.com/webpack/webpack-dev-server/releases/tag/v3.10.0