DEV Community

Yuil Tripathee
Yuil Tripathee

Posted on

Web Dev setup in WSL2 Kali Linux 2022 Edition - Part 2: Coding Tools setup - Python, C++, Go, JS, PHP

#linux #webdev #beginners #javascript

Please be noted that the whole or a part of the article is applicable in the full Linux installation.

Before beginning be sure to check the IP address of your VM and the host machine. This is better to know when you are working with WSL2. You can get the IP address using ip route command in your Linux terminal. For some cases, like in the apache2 server, it has been found that loopback for http://localhost:80 works properly even when running the g Apache server on WSL2.

Code Editor (Visual Studio Code)

I have been using Visual Studio Code for a long time (since 2016), and I realized programming experience is litπŸ’―. Also, the plus is it keeps evolving and getting better over time. To work on WSL with VS Code together, VS Code is installed in Windows and called from the WSL system as simple as a code command.

Python

We would certainly get python3 pre-installed in the Linux system, but if not, then just install using sudo apt install python3 in the terminal. Type python3 and you will get an interactive environment. If this works, you have just confirmed your python setup is working properly. Check man python3 for more details.

Python virtual environments

Python setup can be fun, to begin with, but can go tricky when you pursue advanced stuff in it. Managing packages using virtual environments is aa a new chore here to do things more proficiently. Here in this setup, we will simply use venv based approach.

python3 -m venv [LOCATION] # to create a source for a new virtual env.

source [LOCATION]/bin/activate # to activate the virtual env.

deactivate # to deactivate the virtual env.

pip list # list packages in the virtual env.

pip freeze > requirements.txt # list the installed packages into requirements.txt (from the virtual env.)

pip install -r requirements.txt # install the packages from requirements.txt (into virtual env.)
Enter fullscreen mode Exit fullscreen mode

After the activation of a certain environment, the packages will be installed/used/removed from there only. For better results, it is recommended to use an individual environment for each project. But, for learners, you can create virtual environments such as WebDev, DataScience, and so on.

For data science/machine learning use cases, I had been using miniconda for a while and the setup was consistent, easily reproducible, and easy to maintain. Though this can be managed simply using Python venv environment, we opt for setting up using miniconda preferably to data science application. Miniconda is a free minimal installer for conda. To get conda-related packages, we need to add -c conda-forge if not found to be installed by regular means. Here are some of the commonly used commands.

conda create -n py3k anaconda python=3 # includes optional setup here
conda env list      # shows the list of environments in the system
conda activate py3k # activates the environment
conda install numpy # installs the package in the environment
conda deactivate    # deactivates current conda environment
Enter fullscreen mode Exit fullscreen mode

Check this video from Google Cloud Tech to learn about choosing a Python package manager.

C/C++

Nowadays, we can use C/C++ code in our web development projects (frontends to be specific) using WebAssembly. So, it is indeed now part of our web development setup. You can go through the steps below for a standard setup using GNU tools in Debian.

sudo apt update
sudo apt install build-essential # installs make, gcc, g++, and other packages
Enter fullscreen mode Exit fullscreen mode

Build-essential contains a list of packages required to create a Debian package (.deb). Now, let's run a simple C++ code from Programiz:

// Your First C++ Program

#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}
Enter fullscreen mode Exit fullscreen mode

Save the file (say app.cpp) and run this in the terminal to see "Hello World". This confirms the installation of required tools to work with C/C++ in the WSL2 Linux system.

g++ hello.cpp
Enter fullscreen mode Exit fullscreen mode

Golang

Standard setup:

sudo apt install golang-go
Enter fullscreen mode Exit fullscreen mode

Here is the sample Go code from the official Go website:

// You can edit this code!
// Click here and start typing.
package main

import "fmt"

func main() {
    fmt.Println("Hello, δΈ–η•Œ")
}
Enter fullscreen mode Exit fullscreen mode

Now, save this file (say app.go) and run the app. To confirm if Go is installed in your system.

go run app.go
Enter fullscreen mode Exit fullscreen mode

We can use the gvm Go version manager to use versioned installation which is a tool that provides an interface to manage Go versions.

bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)

gvm install go1.4 # to install Go v1.4
gvm use go1.4 [--default] # to use Go v1.4
Enter fullscreen mode Exit fullscreen mode

TinyGo is recommended for embedded systems and WebAssembly.

JavaScript (NodeJS)

Instead of going with an apt-based setup for NodeJS, we prefer nvm which allows using multiple nodejs versions installed and using them selectively.

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
Enter fullscreen mode Exit fullscreen mode

It also should add the following lines in ~/.bashrc, ~/.profile or ~/.bash_profile, which can also be added manually if the setup does not add as below:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Enter fullscreen mode Exit fullscreen mode

Then, we can proceed with installing Node:

source ~/.bashrc # for bash

nvm install node # installs the latest version
nvm use node # uses the recently installed version in the terminal

nvm uninstall [version] # removes the node for update (or reinstall)
Enter fullscreen mode Exit fullscreen mode

Run node -v and npm -v to confirm node and npm installation.

PHP (Apache Server)

Installing, PHP is easy using the apt.

sudo apt update
sudo apt install apache2

sudo service apache2 start
Enter fullscreen mode Exit fullscreen mode

How, create a file /var/www/html/phpinfo.php and write <?php phpinfo(); ?>. Now, restart Apache and check if the PHP server is working in your Linux system. To perform the test my way, edit the file /var/www/html/index.html as below and check http://localhost:80 for verification.

<!DOCTYPE html>
<html>
    <head>
        <title> Test Document </title>
        <style>
            span {
                font-family: monospace;
                background-color: #1a78e6;
                padding: 5px;
                color: white;
                border-radius: 5px;
            };
        </style>
    </head>
    <body>
        <h1>Test content</h1>
        <p>This page comes from <span>/var/www/html/index.html</span> in WSL2.</p>
        <p>To enable, start apache service and get the IP from <span>ifconfig&gt;inet</span></p>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Or simply check by inserting <?php phpinfo(); ?> in /var/www/html/phpinfo.php and check for http://localhost/phpinfo.php if the server is running.

References

  1. https://dev.to/hymanzhan/setting-up-wsl-2-for-web-development-3202#python-amp-node

Top comments (1)

Collapse
 
volker_schukai profile image
Volker Schukai •

Does WSL actually work stably? We experimented with it in our company a few years ago, but somehow the problems were always greater than the benefits.

Read next

aortega profile image

Introvertish to Extrovertish

Alverto Ortega -

mikeyoung44 profile image

CodecLM: Aligning Language Models with Tailored Synthetic Data

Mike Young -

vas_liubov profile image

Git and GitHub - First experience and Crib

Liubov Vas -

ticha profile image

How to add two numbers in JavaScript without using the "+" operator?

Ticha Godwill Nji -