Web Dev setup in WSL2 Kali Linux 2022 Edition - Part 2: Coding Tools setup - Python, C++, Go, JS, PHP
Tags: linux, webdev, beginners, javascript
Published: 2022-06-04 18:48:45

> 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](https://code.visualstudio.com/) 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](https://docs.python.org/3/library/venv.html) based approach.

```bash
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.)
```

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](https://docs.conda.io/en/latest/miniconda.html) 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.

```bash
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
```

Check this [video](https://www.youtube.com/watch?v=3J02sec99RM) from [Google Cloud Tech](https://www.youtube.com/user/googlecloudplatform) 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.

```bash
sudo apt update
sudo apt install build-essential # installs make, gcc, g++, and other packages
```

Build-essential contains a list of packages required to create a Debian package (`.deb`). Now, let's run a simple C++ code from [Programiz](https://www.programiz.com/cpp-programming/examples/print-sentence):

```cpp
// Your First C++ Program

#include <iostream>

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

```

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.

```bash
g++ hello.cpp
```

## Golang

Standard setup:

```bash
sudo apt install golang-go
```

Here is the sample Go code from the [official Go website](https://go.dev/):

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

import "fmt"

func main() {
	fmt.Println("Hello, 世界")
}

```

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

```bash
go run app.go
```

We can use the [gvm](https://github.com/moovweb/gvm) Go version manager to use versioned installation which is a tool that provides an interface to manage Go versions.

```bash
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
```

[TinyGo](https://tinygo.org/) is recommended for embedded systems and WebAssembly.

## JavaScript (NodeJS)

Instead of going with an apt-based setup for NodeJS, we prefer [nvm](https://github.com/nvm-sh/nvm) which allows using multiple `nodejs` versions installed and using them selectively.

```bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```

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:

```bash
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
```

Then, we can proceed with installing Node:

```bash
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)
```

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

## PHP (Apache Server)

Installing, PHP is easy using the apt.

```bash
sudo apt update
sudo apt install apache2

sudo service apache2 start
```

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.

```html
<!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>

```

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