-
-
Notifications
You must be signed in to change notification settings - Fork 52
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(nuxt): Add nuxt wizard #719
Merged
Merged
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit
Hold shift + click to select a range
c336430
feat(nuxt): Add Nuxt menu option and install SDK (#711)
andreiborza 602a6f9
feat(nuxt): Add sdk module to nuxt config and create client and serve…
andreiborza bffd18b
feat(nuxt): Add example page/component creation and final messaging (…
andreiborza 011afbe
feat(nuxt): Add nuxt 3 and 4 e2e test apps (#718)
andreiborza 89a31bf
change client source map to hidden
s1gr1d 95fcb5e
add scoped styles
s1gr1d 88fe6f6
Add fallback in case magicast can't parse/modify the nuxt config
andreiborza 279543c
change min version to 3.7.0
s1gr1d 430cba1
Update src/nuxt/sdk-setup.ts
andreiborza File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains 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
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Nuxt dev/build outputs | ||
.output | ||
.data | ||
.nuxt | ||
.nitro | ||
.cache | ||
dist | ||
|
||
# Node dependencies | ||
node_modules | ||
|
||
# Logs | ||
logs | ||
*.log | ||
|
||
# Misc | ||
.DS_Store | ||
.fleet | ||
.idea | ||
|
||
# Local env files | ||
.env | ||
.env.* | ||
!.env.example |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
# Nuxt Minimal Starter | ||
|
||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. | ||
|
||
## Setup | ||
|
||
Make sure to install dependencies: | ||
|
||
```bash | ||
# npm | ||
npm install | ||
|
||
# pnpm | ||
pnpm install | ||
|
||
# yarn | ||
yarn install | ||
|
||
# bun | ||
bun install | ||
``` | ||
|
||
## Development Server | ||
|
||
Start the development server on `http://localhost:3000`: | ||
|
||
```bash | ||
# npm | ||
npm run dev | ||
|
||
# pnpm | ||
pnpm dev | ||
|
||
# yarn | ||
yarn dev | ||
|
||
# bun | ||
bun run dev | ||
``` | ||
|
||
## Production | ||
|
||
Build the application for production: | ||
|
||
```bash | ||
# npm | ||
npm run build | ||
|
||
# pnpm | ||
pnpm build | ||
|
||
# yarn | ||
yarn build | ||
|
||
# bun | ||
bun run build | ||
``` | ||
|
||
Locally preview production build: | ||
|
||
```bash | ||
# npm | ||
npm run preview | ||
|
||
# pnpm | ||
pnpm preview | ||
|
||
# yarn | ||
yarn preview | ||
|
||
# bun | ||
bun run preview | ||
``` | ||
|
||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
// https://nuxt.com/docs/api/configuration/nuxt-config | ||
export default defineNuxtConfig({ | ||
compatibilityDate: '2024-11-01', | ||
devtools: { enabled: true } | ||
}) |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{ | ||
"name": "nuxt-app", | ||
"private": true, | ||
"type": "module", | ||
"scripts": { | ||
"build": "nuxt build", | ||
"dev": "nuxt dev", | ||
"generate": "nuxt generate", | ||
"preview": "nuxt preview", | ||
"postinstall": "nuxt prepare", | ||
"start": "node .output/server/index.mjs" | ||
}, | ||
"dependencies": { | ||
"nuxt": "^3.14.1592", | ||
"vue": "latest", | ||
"vue-router": "latest" | ||
} | ||
} |
Binary file not shown.
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
|
3 changes: 3 additions & 0 deletions
3
e2e-tests/test-applications/nuxt-3-test-app/server/tsconfig.json
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"extends": "../.nuxt/tsconfig.server.json" | ||
} |
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
// https://nuxt.com/docs/guide/concepts/typescript | ||
"extends": "./.nuxt/tsconfig.json" | ||
} |
Submodule nuxt-4-test-app
added at
c94934
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,169 @@ | ||
import * as path from 'path'; | ||
import { | ||
checkEnvBuildPlugin, | ||
checkFileContents, | ||
checkFileExists, | ||
checkIfBuilds, | ||
checkIfRunsOnProdMode, | ||
checkPackageJson, | ||
cleanupGit, | ||
KEYS, | ||
revertLocalChanges, | ||
startWizardInstance, | ||
TEST_ARGS, | ||
} from '../utils'; | ||
import { Integration } from '../../lib/Constants'; | ||
|
||
describe('Nuxt-3', () => { | ||
const projectDir = path.resolve( | ||
__dirname, | ||
'../test-applications/nuxt-3-test-app', | ||
); | ||
|
||
beforeAll(async () => { | ||
await runWizardOnNuxtProject(projectDir); | ||
}); | ||
|
||
afterAll(() => { | ||
revertLocalChanges(projectDir); | ||
cleanupGit(projectDir); | ||
}); | ||
|
||
testNuxtProjectSetup(projectDir); | ||
|
||
testNuxtProjectConfigs(projectDir); | ||
|
||
testNuxtProjectBuildsAndRuns(projectDir); | ||
}); | ||
|
||
async function runWizardOnNuxtProject(projectDir: string): Promise<void> { | ||
const integration = Integration.nuxt; | ||
|
||
const wizardInstance = startWizardInstance(integration, projectDir); | ||
const packageManagerPrompted = await wizardInstance.waitForOutput( | ||
'Please select your package manager.', | ||
); | ||
|
||
const tracingOptionPrompted = | ||
packageManagerPrompted && | ||
(await wizardInstance.sendStdinAndWaitForOutput( | ||
// Selecting `yarn` as the package manager | ||
[KEYS.DOWN, KEYS.ENTER], | ||
// "Do you want to enable Tracing", sometimes doesn't work as `Tracing` can be printed in bold. | ||
'to track the performance of your application?', | ||
{ | ||
timeout: 240_000, | ||
}, | ||
)); | ||
|
||
const replayOptionPrompted = | ||
tracingOptionPrompted && | ||
(await wizardInstance.sendStdinAndWaitForOutput( | ||
[KEYS.ENTER], | ||
// "Do you want to enable Sentry Session Replay", sometimes doesn't work as `Sentry Session Replay` can be printed in bold. | ||
'to get a video-like reproduction of errors during a user session?', | ||
)); | ||
|
||
replayOptionPrompted && | ||
(await wizardInstance.sendStdinAndWaitForOutput( | ||
[KEYS.ENTER], | ||
'Do you want to create an example page', | ||
{ | ||
optional: true, | ||
}, | ||
)); | ||
|
||
await wizardInstance.sendStdinAndWaitForOutput( | ||
[KEYS.ENTER, KEYS.ENTER], | ||
'Successfully installed the Sentry Nuxt SDK!', | ||
); | ||
|
||
wizardInstance.kill(); | ||
} | ||
|
||
function testNuxtProjectSetup(projectDir: string) { | ||
const integration = Integration.nuxt; | ||
|
||
test('package.json is updated correctly', () => { | ||
checkPackageJson(projectDir, integration); | ||
}); | ||
|
||
test('.env-sentry-build-plugin is created and contains the auth token', () => { | ||
checkEnvBuildPlugin(projectDir); | ||
}); | ||
|
||
test('config files created', () => { | ||
checkFileExists(`${projectDir}/sentry.server.config.ts`); | ||
checkFileExists(`${projectDir}/sentry.client.config.ts`); | ||
}); | ||
|
||
test('example page exists', () => { | ||
checkFileExists(`${projectDir}/pages/sentry-example-page.vue`); | ||
checkFileExists(`${projectDir}/server/api/sentry-example-api.ts`); | ||
}); | ||
} | ||
|
||
function testNuxtProjectConfigs(projectDir: string) { | ||
test('nuxt config contains sentry module', () => { | ||
checkFileContents(path.resolve(projectDir, 'nuxt.config.ts'), [ | ||
"modules: ['@sentry/nuxt/module'],", | ||
'sentry: {', | ||
' sourceMapsUploadOptions: {', | ||
` org: '${TEST_ARGS.ORG_SLUG}',`, | ||
` project: '${TEST_ARGS.PROJECT_SLUG}'`, | ||
' }', | ||
'},', | ||
'sourcemap: {', | ||
' client: true', | ||
'}', | ||
]); | ||
}); | ||
|
||
test('sentry.client.config.ts contents', () => { | ||
checkFileContents(path.resolve(projectDir, 'sentry.client.config.ts'), [ | ||
'import * as Sentry from "@sentry/nuxt";', | ||
'Sentry.init({', | ||
' // If set up, you can use your runtime config here', | ||
' // dsn: useRuntimeConfig().public.sentry.dsn,', | ||
` dsn: "${TEST_ARGS.PROJECT_DSN}",`, | ||
' // We recommend adjusting this value in production, or using tracesSampler', | ||
' // for finer control', | ||
' tracesSampleRate: 1.0,', | ||
' // This sets the sample rate to be 10%. You may want this to be 100% while', | ||
' // in development and sample at a lower rate in production', | ||
' replaysSessionSampleRate: 0.1,', | ||
' // If the entire session is not sampled, use the below sample rate to sample', | ||
' // sessions when an error occurs.', | ||
' replaysOnErrorSampleRate: 1.0,', | ||
" // If you don't want to use Session Replay, just remove the line below:", | ||
' integrations: [Sentry.replayIntegration()],', | ||
" // Setting this option to true will print useful information to the console while you're setting up Sentry.", | ||
' debug: false,', | ||
'});', | ||
]); | ||
}); | ||
|
||
test('sentry.server.config.ts contents', () => { | ||
checkFileContents(path.resolve(projectDir, 'sentry.server.config.ts'), [ | ||
'import * as Sentry from "@sentry/nuxt";', | ||
'Sentry.init({', | ||
` dsn: "${TEST_ARGS.PROJECT_DSN}",`, | ||
' // We recommend adjusting this value in production, or using tracesSampler', | ||
' // for finer control', | ||
' tracesSampleRate: 1.0,', | ||
" // Setting this option to true will print useful information to the console while you're setting up Sentry.", | ||
' debug: false,', | ||
'});', | ||
]); | ||
}); | ||
} | ||
|
||
function testNuxtProjectBuildsAndRuns(projectDir: string) { | ||
test('builds successfully', async () => { | ||
await checkIfBuilds(projectDir, 'preview this build'); | ||
}); | ||
|
||
test('runs on prod mode correctly', async () => { | ||
await checkIfRunsOnProdMode(projectDir, 'Listening on'); | ||
}); | ||
} |
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@andreiborza, this test app is added here as a submodule. I think that's why the Nuxt tests are broken on master.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, nice catch @onurtemizkan, I opened up a pr to fix it: #742