73. Skip to content

73. Run with VSCode

73.1 Prerequisites

For Linux, it is recommended to install it via:

sudo snap install code --classic

You should have VSCode installed.

You also need to have the code CLI available.

To check:

code --version

It should return like below

1.100.2
848b80aeb52026648a8ff9f7c45a9b0a80641e2e
x64

🚧 If above check failed, you can check 74.1 No code CLI found troubleshoot.

73.2 Run script

With run script, it will help you install all of necessary extensions, as well as open the project on vscode.

If the code CLI is being installed, you can run

./vscode.sh
And wait the process until it is done

73.3 Building the dev environment

Simply click on this option, and it will automatically build the development containers for you.

image.png

🚧 If no "Reopen in container" shows, you can build manually by checking 74.2 No Reopen in container shows guide.

Once the task is running, a notification 1️⃣ will be shown in the bottom right of the VSCode window. Clicking in the notification will show you the setup progress 2️⃣. Note that this make take quite a while depending on the internet bandwidth you have and the CPU power of your machine.

image.png

At the end of this process, you will see a message like this:

[229365 ms] Port forwarding 53251 > 46727 > 46727 terminated with code 0 and signal null.

Once you see that, you can continue the next step below.
Note that the Port forwarding can changes everytime you deploy, so as long as it says terminated with code 0 and signal null, you are done and can continue to next step.

73.4 Run application

After completing the steps above, You need to run the app.
Click Run and Debug button 1️⃣ and then select Django: Run server 2️⃣. After it is selected, click Start Debugging 3️⃣.

image.png

After run, it will a new tab in the right bottom. You need to wait Python debug to finish by saying Quit the server with CONTROL-C.3️⃣,

image.png

73.5 Viewing your test instance

After completing the steps above, you should have the development server available.

Just ctrl + click the url link 0.0.0.0:8080 and click Open

image.png image.png

Or you can access your server directly on port 2000 of your local host:

http://localhost:2000

image.png

The site will be rather bare bones since it will need to be configured in the admin area to set up the theme etc.

By Default, we can use the admin credential:

username : admin
password : admin

🪧 Now that the application is set up, you may begin making updates or choose to work with the provided demo data. For instructions, please refer to the Demo Data Guide.

74. Troubleshoot

74.1 No code CLI found

If code cli check is failed, you can check below how to set cli

74.1.1 Linux

It will be already setup if using snap to install code

74.1.2 Windows

  1. Open Windows VS Code
  2. Install the "Remote - WSL" extension
  3. Open a WSL terminal and try check again

74.1.3 MacOS

  1. Open VS Code
  2. Press Cmd+Shift+P
  3. Type: Shell Command: Install 'code' command in PATH
  4. Press Enter
  5. This will create a symlink:
    /usr/local/bin/code -> /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code
    

And try to check it again via

code --version

If you success setup code cli, you can move to 73.2 Run script.

If you are still having trouble with it, you can do next step, which is set up manually.

74.1.4 Installing devcontainers extension

You can install Dev Containers extension manually (minimum version 0.304.0).

image.png

image.png

74.1.5 Open project

Open the project in VSCode (1️⃣, 2️⃣) by navigating the place on your file system where you checked out the code in the pre-requisites step above (3️⃣).

image.png

Accept the 'trust authors' prompt

image.png

After that everything above is done, you can move on to 73.3 Building the dev environment.

74.2 No reopen in container shows

Press Ctrl -> P 1️⃣ and then >and search for Rebuild. Select Dev Containers: Rebuild and Reopen in Container2️⃣. This will essentially mount your code tree inside a docker container and switch the development context of VSCode to be inside the container where all of the python etc. dependencies will be installed.

image.png 🪧 Now that the application is set up, you may begin making updates or choose to work with the provided demo data. For instructions, please refer to the Demo Data Guide.