Vite with CDN

[kevinpurwito]

Hi, I created a Github Action to build my assets and deploy those assets to S3 backed with CloudFront CDN.

The assets are build and uploaded successfully, I've also set the ASSET_URL to the correct CloudFront URL.

But the @vite blade directive seems still using the manifest.json from the original public folder, instead of from the CloudFront.

• Original

"resources/js/app.js": {
    "file": "assets/app.171492f1.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },

• Build from Github Action, uploaded to S3

"resources/js/app.js": {
    "file": "assets/app.33382a95.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },

The included script using @vite blade directive

<script type="module" src="{{ CLOUDFRONT_URL }}/build/assets/app.171492f1.js"></script>

Anyone has any idea how to resolve this? Thank you.

[SergkeiM]

Hi @kevinpurwito

Please refer to this ASSET_URL

[newarifrh]

Hey @kevinpurwito did you find the solution?

[stephan-v]

This seems to be marked as answered but I don't know why.

When using the @vite directive even when an ASSET_URL is set Laravel will still try to find the manifest.json file locally instead of from the asset url.

An example of this would be having all my built assets in an AWS S3 bucket including my locally built public/build/manifest.json.

When i set an ASSET_URL to ASSET_URL=https://my-s3-bucket.com I would expect to see it be resolved as https://my-s3-bucket.com/public/build/manifest.json instead of it still trying to find it locally.

The workaround would be to add a local route for manifest.json and resolve the asset from the ASSET_URL location in there but this seems really out of place.

[SergkeiM]

Hi @stephan-v

/manifest.json should be located localy, to not make a round trip to S3 Bucket (Latency)

You can still upload your assets to S3, also setting ASSET_URL to your S3 Bucket public URL.

If you for some reason need to get manifest.json from S3 you can override Vite::class

// app/Providers/AppServiceProvider.php
use App\Services\Vite;
...
public function register(): void
{
        $this->app->singleton(\Illuminate\Foundation\Vite::class, Vite::class);
 }

Inside your App\Services\Vite

protected function manifest($buildDirectory)
    {
        //Retrive manifest.json from S3
    }

[stephan-v]

Yeah I understand you don't want to have latency to fetch the manifest.json and you need it locally. At the same time I don't want to turn my production instances into instances which need to have node/npm and any other build tools I use. I guess I will just have to copy over the manifest.json from S3 onto my instances which need them before actually deploying them.

Thanks for the reply.

[SergkeiM]

Hi @stephan-v but you don't need node/npm on your production.

You Build your assets and you just upload manifest.json file to production and all assets to S3

See example what I'm Doing:

I run github Action to Build my project (assets I use ViteS3 plugin to upload files to S3.

After that I take manifest.json file and include it in my Docker image and deploy to K8S.

I've also set ASSET_URL so Laravel knows that files are located on S3, but it takes the paths from manifest.json

Some code if needed:

Github Action:

//Vite
steps:
  - uses: actions/setup-node@v3
    with:
      node-version: 18.14.2
      cache: npm
      cache-dependency-path: src/package-lock.json

  - run: |
      npm ci --prefix src
      npm run build --prefix src
    env:
      S3_ENABLED: true
      ASSET_URL: ${{ env.ASSET_URL }}
      S3_BUCKET: ${{ vars.SERVICE_API_BUCKET }}
      S3_KEY: ${{ vars.SERVICE_API_S3_KEY }}
      S3_SECRET: ${{ secrets.SERVICE_API_S3_SECRET }}
  
  - uses: actions/upload-artifact@v3
    with:
      name: build
      path: src/public/build/manifest.json
// Docker
steps:
      - uses: actions/checkout@v3
      - uses: actions/download-artifact@v3
        with:
          name: build
          path: src/public/build

Vite Config:

ViteS3(!!process.env.S3_ENABLED, {
    basePath: '/build',
    clientConfig: {
        credentials: {
            accessKeyId: process.env.S3_KEY,
            secretAccessKey: process.env.S3_SECRET,
        },
        region: 'eu-west-2'
    },
    uploadOptions: {
        Bucket: process.env.S3_BUCKET
    }
})

So Files are uploaded to S3, manifest.json is located on Production (without a need to install npm/node on production)

Hope this helps