fix: netlify.toml + optimize token images WebP (-99% tamaño) - #4
Merged
Conversation
❌ Deploy Preview for cryptoysuite failed.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideConfigures Netlify to build and serve the Vite/React frontend correctly and switches token images to optimized WebP assets with long-lived cache headers. Sequence diagram for SPA routing and cached token images via NetlifysequenceDiagram
actor User
participant Browser
participant Netlify
participant ReactApp
User->>Browser: Navigate to /exchange
Browser->>Netlify: GET /exchange
Netlify-->>Browser: 200 index.html (rewrite /* to /index.html)
Browser->>Netlify: GET /assets/app.js
Netlify-->>Browser: 200 app.js (Cache-Control max-age=31536000)
Browser->>ReactApp: Execute app.js
ReactApp->>Netlify: GET /tokens/agov.webp
Netlify-->>ReactApp: 200 agov.webp (Cache-Control max-age=31536000, immutable)
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
PR Summary by QodoFix Netlify build config and switch token images to WebP
AI Description
Diagram
High-Level Assessment
Files changed (2)
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- The Netlify headers for JS and CSS use patterns like
/*.jsand/*.css, which only match files in the root; consider switching to something like/assets/*.jsand/assets/*.css(or/*) so the built Vite bundles under/assets/also get the long-term cache headers. - Now that all token images live under
/tokens/*.webp, you might want to centralize the base path and extension in a small helper or constant (e.g.getTokenImg(ticker)), so future format or path changes don't require touching every token entry.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The Netlify headers for JS and CSS use patterns like `/*.js` and `/*.css`, which only match files in the root; consider switching to something like `/assets/*.js` and `/assets/*.css` (or `/*`) so the built Vite bundles under `/assets/` also get the long-term cache headers.
- Now that all token images live under `/tokens/*.webp`, you might want to centralize the base path and extension in a small helper or constant (e.g. `getTokenImg(ticker)`), so future format or path changes don't require touching every token entry.
## Individual Comments
### Comment 1
<location path="netlify.toml" line_range="1-4" />
<code_context>
+[build]
+ base = "frontend"
+ command = "npm install && npm run build"
+ publish = "dist"
+
</code_context>
<issue_to_address>
**suggestion (performance):** Consider using `npm ci` instead of `npm install` in the Netlify build for reproducibility and speed.
In CI/CD pipelines, `npm ci` is the recommended choice as it installs strictly from `package-lock.json`. Only keep `npm install` if you explicitly need to modify or regenerate the lockfile during the build.
```suggestion
[build]
base = "frontend"
command = "npm ci && npm run build"
publish = "dist"
```
</issue_to_address>
### Comment 2
<location path="netlify.toml" line_range="19-22" />
<code_context>
+ to = "/index.html"
+ status = 200
+
+[[headers]]
+ for = "/tokens/*"
+ [headers.values]
+ Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+ for = "/*.js"
+ [headers.values]
+ Cache-Control = "public, max-age=31536000, immutable"
</code_context>
<issue_to_address>
**suggestion:** Header pattern for JS files may only match root-level files, missing nested asset paths.
The pattern `"/*.js"` only targets files directly under `/`. Any JS emitted in nested directories (e.g., `/assets/index-XXXXX.js` or `/static/js/app.js`) would miss these cache headers. Consider using a recursive pattern like `"/**/*.js"` or a path that matches your actual build output.
```suggestion
[[headers]]
for = "/**/*.js"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
¿Qué arregla este PR?
1.
netlify.toml— Fix checks rojos en PRsLos 3 checks de Netlify fallaban en cada PR porque Netlify no sabía cómo buildear el proyecto Vite/React. Este archivo lo arregla:
base = "frontend"→ apunta al directorio correctocommand = "npm install && npm run build"→ build de Vitepublish = "dist"→ carpeta de salida[[redirects]] /* → /index.html→ SPA routing (React Router)max-age=31536000)NODE_VERSION = "20"→ misma versión que Vercel2. Imágenes de tokens optimizadas:
.jpg→.webpLas 10 imágenes originales pesaban 21.8 MB en total. Ahora pesan 156 KB (-99%):
Formato WebP 256×256px (más que suficiente para el UI, que los muestra a 56px /
w-14 h-14).tokens.jsactualizado para referenciar/tokens/*.webpen lugar de/tokens/*.jpg.Resultado esperado
Summary by Sourcery
Configure Netlify to correctly build and serve the frontend and switch token images to optimized WebP assets to improve performance.
New Features:
Enhancements: