Automate terminal commands and launch Chrome while opening VS Code automatically

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/

image.png

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.

image.png

#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).

image.png

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.