Nuxt.js: Allowing config output.publicPath of webpack (for CDN)

[jiangfengming]

Currently, I see output.publicPath is automatically set to urlJoin(this.options.router.base, '/_nuxt/'). But we need to put the static assets to a CDN, something like cdn.example.com. So could you add an option in nuxt.config.js to allow us set a publicPath manually?

I and my team really like nuxt.js, it made SSR super damn easy. We are using it in our new project.
Keep on guys!

_{This feature request is available on Nuxt.js community (#c20)}

[Atinux]

Hi! I'm happy that your team like nuxt.js :)

To be sure, all files in your static folder will be on the CDN, but not the generated JS and CSS files from Nuxt.js right?

[jiangfengming]

No, I mean the files generated by Nuxt.js (webpack behind the scene), that is, the .nuxt/dist folder. Just as the output.publicPath config examples does. (https://webpack.js.org/configuration/output/#output-publicpath)

Maybe I will remove server-bundle.js before putting the files on to CDN, as it doesn't need on client side.

[Atinux]

What do you think of an build.cdn option?

publicPath should not be changed to another directory (because of how Nuxt.js static middleware works), but having a cdn option makes it clear it has to be an URL.

Example of nuxt.config.js:

module.exports = {
  build: {
    cdn: 'https://example.cnd.com/nuxt/'
  }
}

I will also make the generation of the JS files to have a chunkName (nuxt.bundle.986293.js) so on the CDN, there won't be any cache problems.

[jiangfengming]

I think CDN and static middleware are mutually exclusive. If you set publicPath a value begin with /http(s):/, then static middleware shouldn't on. Otherwise, middleware should serves files under that path, hard coded a /_nuxt/ path in URL is not so good. so I think we can reuse publicPath and determine by Regex, whether assets are hosted by self or on CDN.

[Atinux]

I added /_nuxt/ to avoid conflicts between the static folder and the generated files of Nuxt.js.

I might be able to add build.publicPath but if it's not an url, it can create problems with nuxt generate for static web apps generation.

[dohomi]

Just as a reference, I think serverless had a quite nice approach to move all files from specific folder to a S3 bucket:
https://github.com/serverless/examples/tree/master/aws-node-single-page-app-via-cloudfront
They used the aws-cli internally and synced the folder to the destination bucket. I think it would be great to pick up this idea, because for leverage browser caching and setting expired headers it would be neat to store JS, CSS and images outside of the webserver location.

You guys doing a great job, haven't used it much yet but looking forward to use it in an upcoming project.

[voidale]

@Atinux
Your proposed addition of CDN url is perfect with chunkName (nuxt.bundle.986293.js) and it's how should work been using this approach with Meteor it works great.

Could this be added? I'm currently editing it manually to the CDN

As for @fenivana for public assets that are located in /static/ you can manually or create a helper function to generate a full CDN url so instead of:

<img src="/logo.png" />

<img src="https://example.cloudfront.net/logo.png" />

[Atinux]

@voidale it's planned to be added before the 1.0

[cj]

@Atinux I noticed you're setting nuxtStatic to false automatically https://github.com/nuxt/nuxt.js/blob/0.9.10/lib/build.js#L88-L91. I think this should be a manual thing otherwise service like cloudfront won't work. Cloudfront works by grabbing the files from the main url if they aren't cached yet. I.e. if you have https://mysite.cloudfront.net/static/favicon.ico and Cloudfront doesn't have that file, it will grab it from https://mysite.com/static/favicon.ico. So in that case nuxtStatic will still need to be true.

[rubyless]

@Atinux If I also support http and https, I would begin with '//xxx.xxx.com' instead 'http://xxx.xxx.com' or 'https://xxx.xxx.com'.

[Atinux]

I updated the code to take care of it as well @rubyless

[Atinux]

The 0.10 release it out ✋

It took a while but it's now fully working!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.