AWS CloudFront

Understanding the Vapor Asset Pipeline Deploying to a serverless environment like Laravel Vapor changes how your application handles static files. Instead of serving images, CSS, and JavaScript directly from your web server, Vapor offloads this responsibility to AWS CloudFront. This Content Delivery Network (CDN) ensures your assets sit closer to your users, reducing latency and boosting load speeds globally. When you initiate a deployment, Vapor automatically identifies new or modified files in your public directory and syncs them to an S3 bucket backed by CloudFront. The Power of the Asset Helper The secret to seamless asset management is the Laravel `asset()` helper. This function is smarter than it looks. Locally, it generates URLs pointing to your development domain. Once deployed to Vapor, it dynamically injects the CloudFront domain assigned to your project. This prevents broken links and ensures you never have to hardcode environment-specific URLs in your Blade templates. ```php <!-- resources/views/team.blade.php --> <div class="card"> <img src="{{ asset('img/new-teammate.png') }}" alt="Team Member"> <h3>Jane Doe</h3> <p>Software Engineer</p> </div> ``` Intelligent Incremental Deployments Vapor optimizes the deployment process by performing a diff of your assets. When you run `vapor deploy staging`, the tool doesn't blindly re-upload every file. It compares your local files against what is already in the cloud, uploading only the unique additions. This saves time and bandwidth during the build process. Syncing JavaScript Bundlers For modern SPAs or applications using Webpack, you must inform your bundler where the assets live. Vapor provides the `ASSET_URL` environment variable specifically for this purpose. You should configure your `publicPath` in Webpack to use this variable. To ensure everything stays in sync, always run your asset compilation within the `build` hooks of your `vapor.yml` configuration. This guarantees that your JavaScript is compiled with the correct CDN prefix before the files are pushed to AWS. Syntax Notes & Best Practices - **Consistent Helper Usage**: Use the `asset()` helper for every file in the `/public` directory, including favicons and manifest files. - **Build Hooks**: Execute `npm run prod` or `mix --production` within your `vapor.yml` to ensure minification and correct pathing happen during the Vapor build stage.