Automate terminal commands and launch Chrome while opening VS Code automatically
Lets create a basic django application
in your terminal
django-admin startproject automate .
Project Directory
The project is coded using a simple and intuitive structure presented bellow:
< PROJECT ROOT >
|
|-- automate/
| |-- __init__.py
| |-- asgi.py
| |-- settings.py
| |-- urls.py
| |-- wsgi.py
|-- manage.py
Start the application
python manage.py runserver
If all goes well, we can access web application in browser using http://127.0.0.1:8000/
Nothing special until now. It’s time to prepare the application for automatically running the server on chrome while opening project directory in vs code editor.
!!! Make sure you have enabled Open code with in your File explorer
Making server automatic
In order to setup automatic server while opening vs code editor, follow the steps
#1
Create a file in root directory .vscode/tasks.json
< PROJECT ROOT >
|
|-- automate/
| |-- __init__.py
| |-- asgi.py
| |-- settings.py
| |-- urls.py
| |-- wsgi.py
|-- .vscode/ # folder name
| |-- tasks.json # create tasks.json file
|-- manage.py
#2
open vscode in that project directory.
#3
Configuring tasks.json
for your project.
Copy the code in tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
// run server
{
"label": "run-server", // name tasks name for running your server
"type": "shell", // since we need to run command we need to use shell
"command": "python manage.py runserver", // which command to run
"options": {
"cwd": "${workspaceFolder}", // project workspace directory
},
"problemMatcher": [], // not to scan task each time when we run
"presentation": {
"reveal": "always", // always display the terminal
"panel": "new", // new panel
},
"runOptions": {
"runOn": "folderOpen" // start the process when opening this project workspace directory
},
},
]
}
#4
Try to open the workspace folder with vscode, at this point nothing will happen,
In order to automate the process follow the below steps
#1
Open Command Palette
Ctrl + Shift + P (windows)
#2
Type
tasks: run task
#3
Click on tasks named
run-server
#4
Now the server will start in your terminal.
Close the server
#5
you will be prompted for confirmation, like below image. Click Allow and Run button to run it automatically (next time).
Wait that's it.. No we haven't fully automated yet.
Remember that we have to type url in chrome..Yeah😄, then why should we make that launch it automatically just like we did this.
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "run-server", // name tasks name for running your server
"type": "shell", // since we need to run command we need to use shell
"command": "python manage.py runserver", // which command to run
"options": {
"cwd": "${workspaceFolder}", // project working directory
},
"problemMatcher": [], // not to scan task each time when we run
"presentation": {
"reveal": "always", // always display the terminal
"panel": "new", // new panel
},
"runOptions": {
"runOn": "folderOpen" // start the process when opening this project directory
},
},
// open chrome with localhost:8000
{
"label": "launch-chrome", // name tasks name for running your server
"type": "shell", // since we need to run command we need to use shell
"command": "chrome.exe http://localhost:8000/", // using chrome with localhost
"options": {
"cwd": "C:\\Program Files (x86)\\Google\\Chrome\\Application" // chrome location
},
"problemMatcher": [], // not to scan task each time when we run
"presentation": {
"reveal": "always", // always display the terminal
"panel": "new", // new panel
},
"runOptions": {
"runOn": "folderOpen" // start the process when opening this project workspace directory
}
},
]
}
Find your chrome location and add it to the cwd
To check everything works perfectly,
Close the workspace directory & Open it once again
First django run-server
tasks will be running and next chrome
will launch on it self with given url.