feat(front-vike): vike版フロントエンド#4
Draft
sousuke0422 wants to merge 18 commits into
Draft
Conversation
📝 WalkthroughWalkthroughA comprehensive Vike frontend scaffold is added under ChangesVike Frontend Application
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Nitpick comments (7)
apps/frontend-vike/stories/button.css (1)
1-30: ⚡ Quick winAdd an explicit keyboard focus style for button variants.
This improves accessibility consistency across browsers/themes for Storybook interaction testing.
Suggested CSS patch
.storybook-button { display: inline-block; cursor: pointer; border: 0; border-radius: 3em; font-weight: 700; line-height: 1; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } +.storybook-button:focus-visible { + outline: 2px solid `#1f6feb`; + outline-offset: 2px; +}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/stories/button.css` around lines 1 - 30, Add explicit keyboard focus styles for the button base and each variant so keyboard users and Storybook tests get a consistent visible focus ring: update .storybook-button to include a :focus and :focus-visible rule (e.g., outline or box-shadow) and ensure .storybook-button--primary, .storybook-button--secondary, .storybook-button--small, .storybook-button--medium, and .storybook-button--large either inherit or define matching focus styling so the visual contrast is sufficient across variants; use the existing class names (.storybook-button and .storybook-button--*) to locate where to add these focus rules.apps/frontend-vike/package.json (1)
16-21: ⚡ Quick winVerify whether Hono packages are still required after the Elysia migration.
If
@vikejs/honoandhonoare now unused, removing them will reduce dependency surface and maintenance overhead.#!/bin/bash set -euo pipefail echo "Checking for Hono usage in source files..." rg -n --hidden -g '!**/node_modules/**' -g '!**/dist/**' \ 'from\s+["'\''](`@vikejs/hono`|hono)["'\'']|require\(["'\''](`@vikejs/hono`|hono)["'\'']\)|\bcreateHono|\bHono\b' . echo echo "Checking for Elysia usage (for comparison)..." rg -n --hidden -g '!**/node_modules/**' -g '!**/dist/**' \ 'from\s+["'\''](`@vikejs/elysia`|elysia)["'\'']|require\(["'\''](`@vikejs/elysia`|elysia)["'\'']\)|\bElysia\b' .🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/package.json` around lines 16 - 21, Confirm whether the Hono packages are unused: search the codebase for imports/usages of "@vikejs/hono", "hono", "createHono", or "Hono" and also check for "@vikejs/elysia"/"Elysia" references to validate the migration; if no hits, remove the "@vikejs/hono" and "hono" entries from package.json, delete or regenerate lockfiles (package-lock.json / yarn.lock / pnpm-lock.yaml) by reinstalling dependencies, run the project build/tests to ensure nothing breaks, and if any imports remain replace them with the new Elysia equivalents (update code references that use createHono/Hono to the corresponding Elysia APIs) before committing.apps/frontend-vike/.gitignore (1)
248-250: ⚡ Quick winDo not ignore the entire
test/directory.Ignoring
test/here can cause legitimate frontend test files to be unintentionally untracked.Suggested patch
-# TODO: where does this rule come from? -test/🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/.gitignore` around lines 248 - 250, The .gitignore currently ignores the entire test/ directory which will untrack legitimate frontend tests; open apps/frontend-vike/.gitignore and remove the broad "test/" entry (or replace it with a more specific pattern or scoped path) and if you need to ignore generated test artifacts add explicit patterns or negation rules (e.g., leave actual test files with !test/**) so that real test sources under test/ remain tracked.apps/frontend-vike/pages/+onPageTransitionStart.ts (2)
6-7: ⚡ Quick winConsider removing console.log statements from production code.
These debug logs will execute on every page transition in production. Consider using a proper logging utility that can be conditionally enabled, or remove them before merging to main.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/pages/`+onPageTransitionStart.ts around lines 6 - 7, Remove the two console.log debug statements from the page transition handler (+onPageTransitionStart.ts) so they don't run in production; either delete them or replace them with a conditional logging call to your app logger (e.g., use a logging utility or feature-flagged debug logger) that checks an environment flag before emitting messages, and if you replace them ensure any retained log references still use the pageContext.isBackwardNavigation identifier for context.
5-5: ⚡ Quick winRemove unnecessary
asynckeyword.The function is declared
asyncbut contains noawaitexpressions. This adds unnecessary overhead and may mislead readers about asynchronous behavior.♻️ Proposed fix
-export async function onPageTransitionStart(pageContext: Partial<PageContextClient>) { +export function onPageTransitionStart(pageContext: Partial<PageContextClient>) { console.log("Page transition start");🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/pages/`+onPageTransitionStart.ts at line 5, The function onPageTransitionStart is marked async but contains no awaits; remove the unnecessary async keyword from the function declaration (export async function onPageTransitionStart(...) -> export function onPageTransitionStart(...)) so it becomes a plain synchronous function, ensuring any callers expecting a Promise still handle the returned value if needed and verifying there are no await-dependent behaviors inside onPageTransitionStart.apps/frontend-vike/.env.example (1)
13-15: 💤 Low valueConsider alphabetizing the Sentry keys for consistency.
The linter suggests placing
PUBLIC_ENV__SENTRY_DSNbeforeSENTRY_DSNfor alphabetical ordering. While not critical, consistent ordering improves maintainability.♻️ Proposed reordering
## Sentry +# Sentry DNS. Used for Error Reporting in the Browser +PUBLIC_ENV__SENTRY_DSN= # Sentry DNS. Used for Error Reporting on the Server SENTRY_DSN= -# Sentry DNS. Used for Error Reporting in the Browser -PUBLIC_ENV__SENTRY_DSN=🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/.env.example` around lines 13 - 15, Reorder the two Sentry env keys so they are alphabetized: place PUBLIC_ENV__SENTRY_DSN above SENTRY_DSN in the .env.example; ensure the comment “# Sentry DNS. Used for Error Reporting in the Browser” stays with the PUBLIC_ENV__SENTRY_DSN entry (or is updated to remain correct) and no other lines are changed. Reference keys: PUBLIC_ENV__SENTRY_DSN and SENTRY_DSN.apps/frontend-vike/pages/star-wars/index/+Page.vue (1)
5-5: 💤 Low valueConsider using a template literal for the href.
String concatenation works but a template literal would be slightly more readable and consistent with modern JavaScript practices.
♻️ Proposed refactor
- <a :href="'/star-wars/' + item.id">{{ item.title }}</a> ({{ item.release_date }}) + <a :href="`/star-wars/${item.id}`">{{ item.title }}</a> ({{ item.release_date }})🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/pages/star-wars/index/`+Page.vue at line 5, Replace the string-concatenation href binding in the template (the :href="'/star-wars/' + item.id" expression) with a template literal for readability and consistency; update the binding to use backtick interpolation (e.g., `\`/star-wars/${item.id}\``) while keeping the rest of the anchor unchanged so it still renders {{ item.title }} and {{ item.release_date }}.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/frontend-vike/.env.example`:
- Line 3: Remove the surrounding double quotes from environment variable values
so they are not included as literal characters in the loaded environment: update
the APP_URL entry (and the other env keys mentioned) to use unquoted values
(e.g., APP_URL=http://localhost:3000) ensuring variables like APP_URL, and the
two other keys referenced are written without leading/trailing quotes so
downstream URL parsing/validation receives the raw value.
In `@apps/frontend-vike/`+server.ts:
- Line 4: The PORT environment value may parse to NaN and propagate into
prod.port; update the code that sets the port (the const port assignment using
process.env.PORT and parseInt) to validate the parsed value and fall back to
3000 when invalid: parse process.env.PORT, check Number.isInteger(parsedPort) &&
parsedPort > 0 (or Number.isFinite and >0) and only then assign parsedPort to
port, otherwise use the default 3000; ensure the same validated `port` value is
what gets passed into prod.port or server config.
In `@apps/frontend-vike/components/Link.vue`:
- Around line 2-16: The anchor is not getting the href attribute and the
computed isActive uses startsWith unsafely; update the Link.vue component to
bind the incoming href onto the <a> (e.g., pass href from useAttrs to the anchor
element) and make isActive robust by checking href is a string before using
startsWith (or coerce to a string/fallback to "/" when missing) — update
references to useAttrs(), the href variable, the isActive computed, and the
rendered <a> so the link is navigable and urlPathname.startsWith(href) is only
called when href is a valid string.
In `@apps/frontend-vike/components/Logo.vue`:
- Around line 3-4: The logo link in the Logo.vue component contains an image
with no accessible name; add an explicit accessible label by providing a
meaningful alt attribute on the <img> (e.g., alt="YourAppName logo") or, if
decorative, use alt="" plus an appropriate aria-label on the <a> to name the
link; update the <img> inside the anchor (<a href="/">) so screen readers
announce the link correctly.
In `@apps/frontend-vike/pages/star-wars/`@id/+data.ts:
- Around line 13-15: The fetch of the film JSON using pageContext.routeParams.id
should validate the HTTP response before calling response.json(); update the
logic around the fetch (the response variable and the subsequent assignment to
movie) to check response.ok and handle non-OK responses (e.g., throw a
meaningful error or return a 404/undefined result) so invalid or non-existent
IDs don't cause a JSON parsing exception; reference the fetch call using
`pageContext.routeParams.id`, the `response` variable, and the `movie`
assignment in +data.ts to locate and update the code.
In `@apps/frontend-vike/pages/star-wars/index/`+data.ts:
- Around line 12-14: The code calls response.json() without checking response.ok
which can mask upstream failures; before parsing, check response.ok for the
fetch to "https://brillout.github.io/star-wars/api/films.json" (the response
variable) and if not ok throw or return a deterministic error containing status
and statusText so SSR can fail clearly; only call response.json() to populate
moviesData when response.ok is true.
In `@apps/frontend-vike/pages/todo/TodoList.vue`:
- Around line 34-47: submitNewTodo currently mutates todoItems (optimistic add)
before the POST completes and never checks response.ok or catches network
errors; wrap the fetch call in try/catch and either (a) perform the optimistic
push but record a reference/index to the pushed item and on non-ok response or
thrown error remove/rollback that item and restore newTodo.value (and surface an
error), or (b) only push to todoItems after a successful response; implement
checking of response.ok (and parse error body if needed) and ensure
newTodo.value is cleared only on success, referencing submitNewTodo, todoItems
and newTodo in your changes.
In `@apps/frontend-vike/README.md`:
- Around line 1-5: Update the README bootstrap command to reflect the migrated
backend by replacing the `--hono` flag with `--elysia` in the generated pnpm
create vike command; locate the command line in apps/frontend-vike/README.md
(the line containing "pnpm create vike@latest --vue --tailwindcss --hono
--sentry --storybook") and change `--hono` to `--elysia` so the documented
bootstrap matches the current backend choice.
In `@apps/frontend-vike/server/middlewares/create-todo-handler.ts`:
- Line 7: The handler currently calls request.json() unconditionally (newTodo)
which will throw on GET/no-body or malformed JSON; update the request handling
in the createTodo handler to first branch on request.method (allow POST and
optionally handle GET separately) and return 405 for other methods, then only
call await request.json() for POST requests; also wrap the JSON parse in a
try/catch to return a 400 with a clear message for invalid/missing JSON and
validate the parsed shape (e.g., ensure text is a non-empty string) before
proceeding.
- Line 10: The console.log in the create-todo handler is printing raw user input
(newTodo) which can leak sensitive text; update the logging in the function that
handles creating todos (referencing newTodo) to either remove the log entirely
or log only safe metadata such as the todo id and character length (e.g.,
newTodo.id and newTodo.text.length) or a sanitized flag; ensure no raw
newTodo.text or full payload is written to logs.
In `@apps/frontend-vike/stories/Button.vue`:
- Around line 32-34: The click emitter is currently sending a hardcoded value
instead of the real event/context; find the defineEmits declaration and every
place using emit (the emit(...) calls near the current defineEmits and the
handler around lines referenced) and change emit('click', 1) to emit('click',
id) or emit('click', eventId) (or pass the incoming event parameter) so the
actual id/event is forwarded; ensure the variable you pass matches the handler
parameter name (e.g., use the click handler's id or event argument) and update
both occurrences mentioned.
In `@apps/frontend-vike/stories/Configure.mdx`:
- Around line 50-218: Anchors using target="_blank" (e.g., the <a> elements with
className="sb-action-link" and other anchor tags in this MDX like the ones
alongside RightArrow) lack rel="noopener noreferrer"; update every external
anchor that opens a new tab to include rel="noopener noreferrer" to ensure
proper tab isolation and security — search for occurrences of target="_blank" in
this file and add rel="noopener noreferrer" to each matching <a> element.
In `@apps/frontend-vike/stories/Header.stories.ts`:
- Around line 19-29: The story template currently only passes the user prop and
doesn't bind the emitted events to the action handlers (args.onLogin,
args.onLogout, args.onCreateAccount), so the handlers never run; update the
template string (the template property in this file) to add event listeners that
forward component emits to the story args (e.g., bind `@login` to args.onLogin,
`@logout` to args.onLogout, and the component's createAccount emit to
args.onCreateAccount using kebab-case if necessary) so the action handlers are
invoked when the component emits those events.
In `@apps/frontend-vike/vite.config.ts`:
- Around line 22-24: The build config currently sets sourcemap: true which
exposes client source maps publicly; change the Vite build option by updating
the build.sourcemap value from true to "hidden" so sourcemaps are generated but
not referenced in output (allowing the Sentry plugin to upload them privately);
locate the build block that contains build.sourcemap in vite.config.ts and
replace the boolean with the string "hidden".
---
Nitpick comments:
In `@apps/frontend-vike/.env.example`:
- Around line 13-15: Reorder the two Sentry env keys so they are alphabetized:
place PUBLIC_ENV__SENTRY_DSN above SENTRY_DSN in the .env.example; ensure the
comment “# Sentry DNS. Used for Error Reporting in the Browser” stays with the
PUBLIC_ENV__SENTRY_DSN entry (or is updated to remain correct) and no other
lines are changed. Reference keys: PUBLIC_ENV__SENTRY_DSN and SENTRY_DSN.
In `@apps/frontend-vike/.gitignore`:
- Around line 248-250: The .gitignore currently ignores the entire test/
directory which will untrack legitimate frontend tests; open
apps/frontend-vike/.gitignore and remove the broad "test/" entry (or replace it
with a more specific pattern or scoped path) and if you need to ignore generated
test artifacts add explicit patterns or negation rules (e.g., leave actual test
files with !test/**) so that real test sources under test/ remain tracked.
In `@apps/frontend-vike/package.json`:
- Around line 16-21: Confirm whether the Hono packages are unused: search the
codebase for imports/usages of "@vikejs/hono", "hono", "createHono", or "Hono"
and also check for "@vikejs/elysia"/"Elysia" references to validate the
migration; if no hits, remove the "@vikejs/hono" and "hono" entries from
package.json, delete or regenerate lockfiles (package-lock.json / yarn.lock /
pnpm-lock.yaml) by reinstalling dependencies, run the project build/tests to
ensure nothing breaks, and if any imports remain replace them with the new
Elysia equivalents (update code references that use createHono/Hono to the
corresponding Elysia APIs) before committing.
In `@apps/frontend-vike/pages/`+onPageTransitionStart.ts:
- Around line 6-7: Remove the two console.log debug statements from the page
transition handler (+onPageTransitionStart.ts) so they don't run in production;
either delete them or replace them with a conditional logging call to your app
logger (e.g., use a logging utility or feature-flagged debug logger) that checks
an environment flag before emitting messages, and if you replace them ensure any
retained log references still use the pageContext.isBackwardNavigation
identifier for context.
- Line 5: The function onPageTransitionStart is marked async but contains no
awaits; remove the unnecessary async keyword from the function declaration
(export async function onPageTransitionStart(...) -> export function
onPageTransitionStart(...)) so it becomes a plain synchronous function, ensuring
any callers expecting a Promise still handle the returned value if needed and
verifying there are no await-dependent behaviors inside onPageTransitionStart.
In `@apps/frontend-vike/pages/star-wars/index/`+Page.vue:
- Line 5: Replace the string-concatenation href binding in the template (the
:href="'/star-wars/' + item.id" expression) with a template literal for
readability and consistency; update the binding to use backtick interpolation
(e.g., `\`/star-wars/${item.id}\``) while keeping the rest of the anchor
unchanged so it still renders {{ item.title }} and {{ item.release_date }}.
In `@apps/frontend-vike/stories/button.css`:
- Around line 1-30: Add explicit keyboard focus styles for the button base and
each variant so keyboard users and Storybook tests get a consistent visible
focus ring: update .storybook-button to include a :focus and :focus-visible rule
(e.g., outline or box-shadow) and ensure .storybook-button--primary,
.storybook-button--secondary, .storybook-button--small,
.storybook-button--medium, and .storybook-button--large either inherit or define
matching focus styling so the visual contrast is sufficient across variants; use
the existing class names (.storybook-button and .storybook-button--*) to locate
where to add these focus rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 29d99911-76ee-4ef9-ad94-da396d4d56a7
⛔ Files ignored due to path filters (17)
apps/frontend-vike/assets/logo.svgis excluded by!**/*.svgapps/frontend-vike/pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlapps/frontend-vike/stories/assets/accessibility.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/accessibility.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/addon-library.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/assets.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/context.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/discord.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/docs.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/figma-plugin.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/github.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/share.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/styling.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/testing.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/theming.pngis excluded by!**/*.pngapps/frontend-vike/stories/assets/tutorials.svgis excluded by!**/*.svgapps/frontend-vike/stories/assets/youtube.svgis excluded by!**/*.svg
📒 Files selected for processing (54)
apps/frontend-vike/+server.tsapps/frontend-vike/.env.exampleapps/frontend-vike/.env.sentry-build-pluginapps/frontend-vike/.gitignoreapps/frontend-vike/.storybook/main.tsapps/frontend-vike/.storybook/preview.tsapps/frontend-vike/README.mdapps/frontend-vike/TODO.mdapps/frontend-vike/components/Content.vueapps/frontend-vike/components/Counter.vueapps/frontend-vike/components/Link.vueapps/frontend-vike/components/Logo.vueapps/frontend-vike/components/Sidebar.vueapps/frontend-vike/package.jsonapps/frontend-vike/pages/+Head.vueapps/frontend-vike/pages/+Layout.vueapps/frontend-vike/pages/+config.tsapps/frontend-vike/pages/+headHtmlEnd.tsapps/frontend-vike/pages/+onCreateApp.tsapps/frontend-vike/pages/+onPageTransitionEnd.tsapps/frontend-vike/pages/+onPageTransitionStart.tsapps/frontend-vike/pages/_error/+Page.vueapps/frontend-vike/pages/index/+Page.vueapps/frontend-vike/pages/sentry/+Page.vueapps/frontend-vike/pages/star-wars/@id/+Page.vueapps/frontend-vike/pages/star-wars/@id/+data.tsapps/frontend-vike/pages/star-wars/index/+Page.vueapps/frontend-vike/pages/star-wars/index/+data.tsapps/frontend-vike/pages/star-wars/types.tsapps/frontend-vike/pages/tailwind.cssapps/frontend-vike/pages/todo/+Page.vueapps/frontend-vike/pages/todo/+data.tsapps/frontend-vike/pages/todo/TodoList.vueapps/frontend-vike/pnpm-workspace.yamlapps/frontend-vike/sentry.browser.config.tsapps/frontend-vike/server/elysia.tsapps/frontend-vike/server/hono.tsapps/frontend-vike/server/middlewares/create-todo-handler.tsapps/frontend-vike/server/middlewares/setting-injector.tsapps/frontend-vike/server/settings/env.tsapps/frontend-vike/stories/Button.stories.tsapps/frontend-vike/stories/Button.vueapps/frontend-vike/stories/Configure.mdxapps/frontend-vike/stories/Header.stories.tsapps/frontend-vike/stories/Header.vueapps/frontend-vike/stories/Page.stories.tsapps/frontend-vike/stories/Page.vueapps/frontend-vike/stories/assets/avif-test-image.avifapps/frontend-vike/stories/button.cssapps/frontend-vike/stories/header.cssapps/frontend-vike/stories/page.cssapps/frontend-vike/tsconfig.jsonapps/frontend-vike/vite.config.tsapps/frontend-vike/vitest.shims.d.ts
| import type { Server } from "vike/types"; | ||
| import { app } from "./server/elysia"; | ||
|
|
||
| const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000; |
There was a problem hiding this comment.
Validate PORT before assigning it to server config.
Line 4 can produce NaN for invalid env values, which propagates into prod.port.
Proposed fix
-const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
+const parsedPort = Number(process.env.PORT);
+const port =
+ Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535
+ ? parsedPort
+ : 3000;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000; | |
| const parsedPort = Number(process.env.PORT); | |
| const port = | |
| Number.isInteger(parsedPort) && parsedPort > 0 && parsedPort <= 65535 | |
| ? parsedPort | |
| : 3000; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/`+server.ts at line 4, The PORT environment value may
parse to NaN and propagate into prod.port; update the code that sets the port
(the const port assignment using process.env.PORT and parseInt) to validate the
parsed value and fall back to 3000 when invalid: parse process.env.PORT, check
Number.isInteger(parsedPort) && parsedPort > 0 (or Number.isFinite and >0) and
only then assign parsedPort to port, otherwise use the default 3000; ensure the
same validated `port` value is what gets passed into prod.port or server config.
Comment on lines
+22
to
+24
| build: { | ||
| sourcemap: true | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Read the vite.config.ts file to see full context
cat -n apps/frontend-vike/vite.config.tsRepository: TeamBlackCrystal/task
Length of output: 1865
🏁 Script executed:
# Search for Sentry configuration in the project
rg -i "sentry" --type ts --type js --type json -B 2 -A 2Repository: TeamBlackCrystal/task
Length of output: 4720
🏁 Script executed:
# Check if there's any build output or deployment configuration that handles .map files
rg -i "\.map" --type ts --type js -B 2 -A 2Repository: TeamBlackCrystal/task
Length of output: 2813
🏁 Script executed:
# Look for any vite plugins or build configuration related to sourcemaps
rg "sourcemap" --type ts --type js -B 3 -A 3Repository: TeamBlackCrystal/task
Length of output: 771
Use hidden sourcemaps with Sentry to prevent exposing client source code publicly.
sourcemap: true generates sourcemaps that are publicly accessible to clients. With the Sentry plugin enabled, use sourcemap: "hidden" instead—this generates the .map files but doesn't reference them in the output bundles, allowing Sentry to upload them privately while keeping your source code unexposed.
Suggested change
build: {
- sourcemap: true
+ sourcemap: "hidden"
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| build: { | |
| sourcemap: true | |
| }, | |
| build: { | |
| sourcemap: "hidden" | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/frontend-vike/vite.config.ts` around lines 22 - 24, The build config
currently sets sourcemap: true which exposes client source maps publicly; change
the Vite build option by updating the build.sourcemap value from true to
"hidden" so sourcemaps are generated but not referenced in output (allowing the
Sentry plugin to upload them privately); locate the build block that contains
build.sourcemap in vite.config.ts and replace the boolean with the string
"hidden".
Member
Author
|
現段階ではnuxtより起動早い |
Contributor
|
ほー |
Member
Author
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/frontend-vike/vite.config.ts (1)
37-39:⚠️ Potential issue | 🟠 Major | ⚡ Quick winUse hidden sourcemaps for production bundles.
Line 38 uses
sourcemap: true, which emits client-referenced sourcemaps. With Sentry plugin configured, prefer hidden sourcemaps to avoid exposing sources.Suggested change
build: { - sourcemap: true, + sourcemap: 'hidden', },🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/frontend-vike/vite.config.ts` around lines 37 - 39, Change the Vite build sourcemap from an exposed client-referenced sourcemap to a hidden sourcemap for production: update the build.sourcemap setting used in the exported Vite config so it uses "hidden" for production builds (e.g., use the config function's mode or NODE_ENV to set build.sourcemap = mode === 'production' ? "hidden" : true) instead of the current boolean true; target the build.sourcemap property in the vite config export to implement this.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/frontend-vike/vite.config.ts`:
- Line 5: The triple-slash directive /// <reference types="@batijs/core/types"
/> is currently below imports so TypeScript ignores it; move that exact
directive string to the very top of vite.config.ts before any import statements
(i.e., place it above the first import line) so the ambient types from
"@batijs/core/types" are correctly applied.
---
Duplicate comments:
In `@apps/frontend-vike/vite.config.ts`:
- Around line 37-39: Change the Vite build sourcemap from an exposed
client-referenced sourcemap to a hidden sourcemap for production: update the
build.sourcemap setting used in the exported Vite config so it uses "hidden" for
production builds (e.g., use the config function's mode or NODE_ENV to set
build.sourcemap = mode === 'production' ? "hidden" : true) instead of the
current boolean true; target the build.sourcemap property in the vite config
export to implement this.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 863cfbf2-2355-4a4f-8e8c-48329be25e1b
⛔ Files ignored due to path filters (1)
apps/frontend-vike/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
apps/frontend-vike/package.jsonapps/frontend-vike/pnpm-workspace.yamlapps/frontend-vike/vite.config.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/frontend-vike/pnpm-workspace.yaml
sousuke0422
force-pushed
the
feat/vike-front
branch
from
232e689 to
f70cc57
Compare
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
2 participants
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.
#1 の解決に対するアプローチ案
ToDo(順不同)
追加
Note
Summary by CodeRabbit
New Features
Documentation
Configuration