CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
user10090131
user10090131

Reputation:

How to serve cdn links for assets in NuxtJS?

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that?

Possible ways I can think of:

  1. Vuex Store - set baseURL for the images and then use in components
  2. env - use environment variable to set the cdn URL

TIA

Upvotes: 1

Views: 7750

Answers (3)

Kunal Rajput
Kunal Rajput

Reputation: 794

Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file

  build: {
    publicPath: 'https://your-cdn-url.net/nuxt'
  }

But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here

I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js

  modules: [

    [
      '@nuxtjs/pwa',
      {
        workbox: { publicPath: '/_nuxt/' },
        manifest: { publicPath: '/_nuxt/' },
      },
    ],


  ],

3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows

You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)



[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Upvotes: 0

Aldarund
Aldarund

Reputation: 17621

You can set it via publicPath property in nuxt.config

export default {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

https://nuxtjs.org/api/configuration-build/#publicpath

Upvotes: 3

Vernon Jian Hao
Vernon Jian Hao

Reputation: 86

If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.

Upvotes: 0

Related Questions