How do you attach the VS Code debugger in a fresh Sveltekit project?
I have created a repository here.
The launch.json file looks like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "attach",
"name": "Attach Program",
"processId": "${command:PickProcess}"
}
]
}
When I run the project with npm run dev and launch the debugger, it will not break:
I tried to add sourceMap true to preprocess in svelte.config.js:
preprocess: preprocess({
sourceMap: true
}),
Why does VS Code tell me it's an "Unbound breakpoint", when I hover the breakpoints?
This is frustrating as I have to debug some Sveltekit code, where I need the "request": "attach" option to work 😅
update
I tried modifying the dev script to "dev": "NODE_OPTIONS=\"--inspect\" svelte-kit dev", but no help...
Related
I have tried using Nx in an attempt to make use of Monorepos. I have been facing an issue to serve multiple apps via nx run-many command. Can anyone correct me if I'm doing something wrong?
Command used: nx run-many --target=serve --all
I can see the Nx Console logging all the available apps but only running one
> NX Running target serve for projects:
- app1
- app2
———————————————————————————————————————————————
> nx run app1:serve
Try this:
nx run-many --parallel --target=serve --projects=frontend,backend
This happens due to port overriding, if you have multiple frontend apps for example they will run on the same port.
You can manage every project configuration in project.json file, and there you can handle different port for every project.
example:
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "react-todo:build",
"hmr": true,
"port": 3001
},
"configurations": {
"production": {
"buildTarget": "react-todo:build:production",
"hmr": false
}
}
},
this is a react config in (apps/<Your_Project_Name>/project.json)
nx run-many --target=serve --all --maxParallel=100
The default value for --maxParallel is three, it means runs tasks in batches of three by default.
Additional, Exclude few apps to not serve then.
nx run-many --target=serve --all --maxParallel=100 --exclude=app-name
Github
Update solution in 9/2022.
go to package.json adding this script that allow us to run many project with only one command
"all": "npx nx run-many --target=serve --all --maxParallel=100"
inside apps folder, there are several application, and go to their package.json, and edit `targets -> serve -> options like this sample
"options": {
"buildTarget": "your app name:build",
"hmr": true,
"port": 4201 // adding this
},
You can change the serving port by editing package.json
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "admin-web:build",
"port": 4220,
"hmr": true
},
"configurations": {
"production": {
"buildTarget": "admin-web:build:production",
"hmr": false
}
}
}
After that you can run nx run-many
nx run-many --parallel --target=serve --projects=frontend,backend
For now, Remix uses a hardcoded 8002 port for file watcher. When running two or more remix apps at once, either one of the apps (which was started later) would have an error accessing the file server port.
To override, add a .env or .env.local file in your respective app directory and add the environment variable REMIX_DEV_SERVER_WS_PORT.
apps/
- app1
.env.local -> REMIX_DEV_SERVER_WS_PORT=8003
- app2
.env.local -> REMIX_DEV_SERVER_WS_PORT=8004
This worked for me.
I'm unable to make VSCode stop at a breakpoint on the app created by npx create-react-app on a guest VM running on the same system as VSCode.
I use VSCode on a Windows 10 Pro host connected to a Centos 7 system running on a guest VM using VMWare. I use the "Remote SSH" extension of VSCode and it seems to mostly work. I'm new to this technology stack so please forgive my newbie confusion.
I've set a breakpoint at line six of the App.js generated by create-react-app. I've done all sorts of permutations of launch.json and package.json, none seem to make any difference at all. I've installed the "Chrome development extension".
Here is my launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "chrome",
"type": "chrome",
"request": "launch",
"preLaunchTask": "debug-start",
"postDebugTask": "debug-stop",
"url": "http://192.168.242.128:3000",
"webRoot": "${workspaceFolder}",
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/node_modules/**",
"bootstrap"
]
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
"runtimeArgs": [
"--inspect-brk=covid.guest:9229",
"start"
]
}
]
}
Here is my package.json:
{
"name": "home-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
When I start the app from "Run" menu, the development server starts, a chrome browser opens, and the resulting page has the spinning React logo and reads "Edit src/App.js and save to reload." The breakpoint is ignored. While the development server is running, the breakpoint is a hollow circle, and its tooltip reads "Breakpoint set but not yet bound".
The "DEBUG CONSOLE" contains:
[HMR] Waiting for update signal from WDS...
Download the React DevTools for a better development experience: ...
The built-in terminal contains:
Compiled successfully!
You can now view home-react-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.242.128:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Note that the browser is open on my Windows 10 host. The (local) IP address of the host is 192.168.242.128.
When I stop the dev server, either by using the run bar or closing the browser, the terminal tells me I've stopped and the breakpoint returns to its solid red appearance.
I'm able to debug a node.js app generated by express, and it generates its own debug port along the lines of:
/home/<user>/.nvm/versions/node/v13.13.0/bin/node --inspect-brk=11875 bin/www
It looks to me as though I have to somehow get inside the webpack dev server. Yikes.
How do I get this technology stack to actually STOP at the breakpoint? What must I do to actually bind to the breakpoint?
After several days of intense poking around, I found the answer. It is to change the "chrome" entry in launch.json so that the value of "webRoot" is a full file path -- in this case "/home/<user>/plain-react-app".
With that change, the source mapping works and the VSCode debugger stops as desired.
My learning curve would have been helped enormously by some simple and crisp explanatory text in the VSCode documentation about how "webRoot" is used and with some actual examples. I think my configuration (VSCode running on the host targeting javascript running on a guestVM) is fairly common, and I think this use of an explicit filepath will be needed whenever the browser runs on a different host from the server it connects to.
I am new to Web Development. Tried to build a production build with the command npm run build. I tried to run index.html after the build is completed, all I get was a 404 page.
However, when I tried to run it with http-server, I'm able to visit my website and all the pages in it. I'm unsure what this means?
With what I have, am I ready to publish all files in build to my PROD server?
If not, what is missing?
Package.json
{
"name": "testing",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
I have built an application using the create-react-app version 2.0 locally. It runs, builds and works as expected. I am trying to deploy it to Zeit, using now. It works fine when I run the now command from withing the generated ./build folder (npm run build's destination).
My goal is to integrate it with GitHub so it updates the deployment on git push. Unfortunately, running now at the project's root folder doesn't work. I have a now.json file with the following contents:
{
"version": 2,
"name": "somename",
"builds": [
{
"src": "package.json",
"use": "#now/static-build"
}
],
"routes": [
{
"src": "^/static/(.*)",
"dest": "/static/$1"
},
{
"src": ".*",
"dest": "/index.html"
}
]
}
and my package.json contains the "now-build": "serve --single ./build" script.
The error
Every build attempt from the root folder results to this error:
Tries
I have tried changing the now-build to now-start and it didn't work, as it specifically needs now-build, I have tried removing the now.json altogether and it didn't work and every YouTube video I found on the issue doesn't do anything different but it works for them.
Any ideas?!
It turns out that the build command is wrong. The correct one is:
"now-build": "npm run build && mv build dist" in the package.json.
More info: https://github.com/zeit/now-examples/tree/master/create-react-app
I am using the latest Visual Studio Code and Chrome debugger extension and my code is React SPA.
When I am trying to set breakpoints inside generator functions
(i.e. function* ), the breakpoint is moved to the top of the function and I can’t stop when I want.
Step Over also doesn’t work, but move me to some low level library.
For normal functions breakpoints are working correctly.
Am I missing something? Is it a known limitation or a bug? Is any tools( e.g. Edge/Firefox or native Chrome debugger) that allow debugging of generator functions better?
I'm currently seeing the same thing and am looking to find a solution. This is what I've found so far and might be of some help.
In our case, we use babel to transpile our code, and looking at the code produced by babel we could see that generators were being transpiled for the browsers targeted by browerslist read by #babel/preset-env. So as an initial test, we removed #babel/preset-env from our dev build and tested locally in Chrome 70. Generators were no longer being transpiled, and we could successfully set breakpoints in VSCode.
So for us the solution was to not transpile for dev builds, and to transpile for our targeted browsers for production builds.
For reference, here is the babel config we used to test this solution:
module.exports = {
presets: [
'#babel/preset-react'
],
plugins: [
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-modules-commonjs'
],
env: {
production: {
presets: [
[
'#babel/preset-env',
{
debug: false,
useBuiltIns: 'usage'
}
]
],
plugins: [
'#babel/plugin-transform-runtime'
]
}
}
}
We can set BABEL_ENV=production in any production npm scripts where we want to target our supported browsers.
{
"name": "testapp-ui",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production npm run build:webpack",
"build:dev": "rm -rf dist && mkdir dist && NODE_ENV=development npm run build:webpack",
"build:webpack": "webpack --progress --debug",
...
Thanks to Bernard Leech's answer , I’ve updated the .babelrc configuration file ( one of possible formats as described in https://babeljs.io/docs/en/configuration).
And it allowed to set breakpoints in dev environment.
The changed lines in .babelrc are commented out:
{
"presets": [
//[
// "es2015",
// {
// "modules": false
// }
//],
"react",
"stage-0"
],
"env": {
"test": {
"presets": ["react"]
"prod": {
"presets": [["es2015"], "react"]
}
}
}
To use different configurations for dev and prod you should set e.g.
BABEL_ENV=prod and have different sections in “env” element ( from
How do you configure babel to run with different configurations in different environments )
Related links:
How to debug ES6 NodeJS with VSCode
Debugging with babel-register + NodeJs does not work #5728