i'm launching a next.js app and trying to set env file like so:
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"envFile": "/Users/xx/ODM/git/yy/.vscode/.env",
"env": {
"hello":"world",
},
i'm using the absolute path just to be sure it is correct
the file content is:
API_HMAC_AUTH_SECRET="222222"
but when running the server and trying to check the process.env i'm getting the following:
console.log(process.env.API_HMAC_AUTH_KEY) \\ undefined
console.log(process.env.hello) \\ world
any ideas?
Related
I have an issue with debugging NextJS 12 apps in VSCode. Basically, the breakpoints ain't triggered when reloading in the browser.
Create the default NextJS 12 app using: $ npx create-next-app#latest.
Create the launch.json using https://nextjs.org/docs/advanced-features/debugging:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
}
]
}
Start the app with $ npm run dev
Set a breakpoint at the pages/index.js:10 for example.
Run the debug session and see how the breakpoint is getting hit.
Now if you reload the page, the breakpoing isn't going to be hit. Why?
The only way to get it triggered again is to restart the debugging session OR edit the file with the breakpoint.
Ideas?
Is there a sort of optimization which can be disabled?
Documentation from Next JS can be found here
The example illustrates 3 ways to connect:
Server side
Client side
Full stack
For your case, since it's page/index.js (client-side) I would suggest the second option or the 3rd option.
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
I want to run bash script when I hit F5 and see the results in the terminal like I can do with python scripts or whatever. I tried to do that with Bash Debug however it automatically goes to the debug mode and stops at the first step even if I do not put breakpoint. This is the launch configuration I use.
{
"type": "bashdb",
"request": "launch",
"name": "Run mysql test",
"cwd": "${workspaceFolder}",
"program": "/srv/gpf/dba/mysqlslap/run.sh",
"args": []
}
I don't know about running bash in a debug mode (doesn't seem like you need those features based on your example) but you can easily get your script to run as a Task or Build option.
Place this at .vscode/tasks.json of your project dir
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "Run as Bash Script",
"type": "shell",
"command": "/bin/bash ${file}",
"problemMatcher": [],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
You can place whatever you want in the "command" parameter.
As you can see, it's of type "kind": "build" so I can hit ctrl+shift+B and this will execute in a terminal.
Note, you can also use the command palette (F1 or ctrl+shift+P) and use Task: Run as Task too.
Source: https://code.visualstudio.com/Docs/editor/tasks
I have a Go application which uses a Postgres DB on Cloud (Heroku) and sets the DB Url as an environment variable calling the Heroku CLI as per guidelines.
So the app can be launched with the command
DATABASE_URL=$(heroku config:get DATABASE_URL -a my-db) my-app
Now I would like to launch the app from within VSCode in debug mode but I do not find the right way to set the DATABASE_URL variable before the debug starts. I have tried with preLaunchTask but with no success. The configurations I have used with preLaunchTask are these
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "auto",
"preLaunchTask": "setPostgresDbUrl",
"program": "${fileDirname}",
"env": {},
"args": []
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "setPostgresDbUrl",
"type": "shell",
"command": "bash ./setUrl.sh"
}
]
}
setUrl.sh
#!/usr/bin/env bash
DATABASE_URL=$(heroku config:get DATABASE_URL -a go-batch)
I have been able to solve the problem in a slightly different way, i.e. using an .env file to set an environment variable from which the url is read.
So, in the root folder of the project I have an .env file like this
the url may change - to get the current url run the command
# echo $(heroku config:get DATABASE_URL -a go-batch)
DATABASE_URL=postgres://blah-blah-1.eu-west-1.compute.amazonaws.com:5432/blah
Then in the launch.json I specify to read the environment variable values like this
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchGo",
"type": "go",
"request": "launch",
"mode": "auto",
//"preLaunchTask": "setPostgresDbUrl",
"program": "${fileDirname}",
"envFile": "${workspaceFolder}/.env",
"args": []
}
]
}
i'm trying to debug an application (a web api) that use FastAPI (uvicorn)
I'm also using poetry and set the projev virtual environment in vscode.
i read this tutorial to setup uvicorn and this one to setup vscode but i think i'm doing something wrong in set it up.
I tried to setup the launch.json both as python: module and python: current file
The problem seems that it doesn't recognize the project structure cause when i run the debug it stopped in an import statement with this error:
Exception has occurred: ImportError
attempted relative import with no known parent package
This is my current launch.json configuration:
"configurations": [
{
"name": "Python: local debug",
"type": "python",
"request": "launch",
"program": "${workspaceFolder}/src/topic_service/service/__init__.py",
"args" : ["--port", "8000"]
},
]
I also tried to add a .env file setting PYTHONPATH:
PYTHONPATH=.:${PYTHONPATH}
Locally i run the application as follow:
poetry run uvicorn src.main:app --port 8080 --reload
Does anyone know how to correctly setup vscode to debug an uvicorn application?
Thank you
UPDATE:
I also tried what this article says. the debugger seems to start but nothing happen (no breakpoint is triggered)
Try this configuration.
{
"name": "Python: Module",
"type": "python",
"request": "launch",
"module": "uvicorn",
"args": ["src.main:app","--reload"]
}
Likewise you provide uvicorn module with necessary args during development of FastAPI application, you need to configure your launch.json located in .vscode directory with respective values.
I did a write up for custom project configurations to debug FastAPI in VS Code here
Suppose you issue the following command to run FastAPI on uvicorn server with args mentioned as below
uvicorn main:app --reload --port 8000
then your launch.json should have module with value of uvicorn and each of the args separated by space as items of the args array.
"module": "uvicorn",
"type": "python",
"request": "launch",
"args": [
"main:app",
"--reload",
"--port",
"8000"
],
"env": {
"usersecret": "some$Ecret",
}
You can have this launch.json file in .vscode and then modify the args array in the JSON configuration as per your project structure.
{
// 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": "Python: FastAPI",
"type": "python",
"request": "launch",
"module": "uvicorn",
"env": {
"db_username": "postgres",
"db_password": "secret",
"host_server": "localhost",
"database_name": "fastapi",
"ssl_mode": "prefer",
"db_server_port": "5432"
},
"args": [
"main:app",
"--reload",
"--port",
"8000"
]
}
]
}
For me worked with this configurations:
On Debug section on VSCode, choose create launch.json option. Probally it will open launch.json on .vscode folder in your root folder explorer
like this, inside of launch.json put this:
"version": "0.2.0",
"configurations": [
{
"name": "Python: FastAPI",
"type": "python",
"request": "launch",
"module": "uvicorn",
"cwd": "${workspaceFolder}/<folder to your main.py>",
"args": [
"main:app",
"--reload",
"--port", //these arg are optional
"3003"
]
}
]
}
Now , just run your debugger and have a nice day!
Edit: The cwd ensure that your debbuger will find the right path to your main.py file. So, for whos use multiple debuggers or uses outside vsCode with launch.json it's a nice choice use it.
The quick and easy way: launch debugger F5 and then select FastAPI Debug Configuration:
(p.s. this works on the VSCode Insiders; haven't tried it on a regular version)
The way i debug is quite basic, hope it helps
i have .py file with this config:
import uvicorn
from app.main import api
if __name__ == "__main__":
dev = 1
if dev==0:
#use this one
uvicorn.run(api, host="127.0.0.1", port=5000, log_level="info")
if dev == 1:
#or this one
uvicorn.run('app.main:api', host="127.0.0.1", port=5000, log_level="info", reload=True, debug=True)
if dev == 2:
uvicorn.run('app.main:api', host="127.0.0.1", port=5000, log_level="info", workers=2)
and run the file with the vscode debugger, the important thing is to run the app with the debug flag because otherwise the debugger skips the breakpoints (at least in my case)
I have top-level folder Homepage with the following structure:
--Homepage
----Client <- Angular app, created with `ng new` command
----Server <- .NET Core WebApi, created with `dotnet new webapi` command
I open VSCode at Homepage level:
I have these extensions installed:
Question
If I want to use single VSCode environment to work on both projects, Client and Server, is it possible to bind F5 (or Ctrl+F5) to start both projects together?
Client app I start using ng serve (it will run on http port 4200)
Server app I start using dotnet run (it will run on https port 5001)
I have just one common .vscode folder on Homepage (root level):
By default, when first created, the content of launch.json was this:
{
// Use IntelliSense to find out which attributes exist for C# debugging
// Use hover for the description of the existing attributes
// For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
"version": "0.2.0",
"configurations": [
{
"name": ".NET Core Launch (web)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
// If you have changed target frameworks, make sure to update the program path.
"program": "${workspaceFolder}/Server/bin/Debug/netcoreapp2.1/Server.dll",
"args": [],
"cwd": "${workspaceFolder}/Server",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart",
"launchBrowser": {
"enabled": true,
"args": "${auto-detect-url}",
"windows": {
"command": "cmd.exe",
"args": "/C start ${auto-detect-url}"
},
"osx": {
"command": "open"
},
"linux": {
"command": "xdg-open"
}
},
"env": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
"/Views": "${workspaceFolder}/Views"
}
},
{
"name": ".NET Core Attach",
"type": "coreclr",
"request": "attach",
"processId": "${command:pickProcess}"
}
,]
}
So, when I press F5 it builds and start the Server app, the page opens at https://localhost:5001, from there I can navigate to https://localhost:5001/api/values and see WebApi works.
But the Client app doesn't start at all.
So, I thought if I add Debugger for Chrome extension's settings to launch.json, it should work, so I clicked on Add Configuration and added corresponding section:
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
I changed port from 8080 to 4200, since ng serve hosts on port 4200
But it does not start the Client app.
Please advice. Thanks
I have similar (node.js for API) and spent quite some times couldn't resolved, for example use && or &. Result is either API up or Angular up, never the both.
Anyway I finally realized have both Api and UI in the same folder/project/solution is not practical. An API is not specific to an UI, it's a universal DLL/service, should be siting somewhere by itself. So I separated them into two diff folders and have 2 VSC instances to run them:
start the API in debug mode
in 2nd VSC, run ng serve and let it take time to build
when ng says "Compiled successfully" go to launch.json to start the debug entry associated with Chrome
they work perfectly.