Ubuntu - Development

Ubuntu - Development Environment Setup

Ubuntu is a popular platform for software development due to its stability, extensive command-line tools, and broad support for programming languages and development tools. Let’s explore setting up a modern development environment, focusing on Visual Studio Code (VS Code).

Choosing an IDE/Text Editor

While basic text editors like Gedit (GNOME Text Editor) are available, a more powerful Integrated Development Environment (IDE) or advanced text editor is recommended for serious development.

• Visual Studio Code (VS Code): A free, open-source, and highly popular code editor developed by Microsoft. It offers excellent support for numerous languages, Git integration, a vast extension marketplace, debugging tools, and an integrated terminal. This will be our focus.
• Sublime Text: A proprietary, fast, and feature-rich text editor known for its performance and customizability.
• JetBrains IDEs (IntelliJ IDEA, PyCharm, WebStorm, etc.): Powerful, commercial IDEs tailored for specific languages or platforms (e.g., PyCharm for Python, IntelliJ IDEA for Java/Kotlin, WebStorm for JavaScript). Community editions are often available for free.
• GNOME Builder: An IDE focused on GNOME application development, but can be used for other projects.
• Vim/Neovim or Emacs: Powerful, terminal-based text editors with a steep learning curve but incredibly efficient once mastered.

Installing Visual Studio Code (VS Code)

VS Code can be installed on Ubuntu in several ways:

Method 1: Using Snap Package (Easy Updates)

sudo snap install code --classic

The --classic confinement allows VS Code necessary system access.

Method 2: Using the .deb Package (Official)

Step 1: Go to the official VS Code website: https://code.visualstudio.com/

Step 2: Download the .deb package for Debian/Ubuntu (64-bit).

Step 3: Install the downloaded package. Open a terminal, navigate to your Downloads folder, and run (replace vscode_filename.deb with the actual downloaded filename):

cd ~/Downloads
sudo apt install ./<vscode_filename.deb>

This method will also add the Microsoft repository so VS Code can be updated via sudo apt update && sudo apt upgrade.

Once installed, launch VS Code from your applications menu.

Setting Up a Simple Web Project in VS Code

Let’s create a basic HTML project:

Step 1: Create a project folder. Open your terminal and create a directory:

mkdir ~/my_web_project
cd ~/my_web_project

Step 2: Open the folder in VS Code. In the terminal, type:

code .

This command opens the current directory (.) in VS Code.

Step 3: Create an HTML file. In VS Code’s Explorer panel (usually on the left), right-click in the empty space and select ‘New File’. Name it index.html.

Step 4: Add basic HTML content. Type ! or html:5 and press Tab or Enter. VS Code will generate a basic HTML5 boilerplate. Add some content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, Ubuntu Developers!</h1>
    <p>Welcome to web development with VS Code.</p>
    <script src="script.js"></script>
</body>
</html>

Step 5: Create a CSS file (optional). Create style.css and add some styles:

style.css

body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    padding-top: 50px;
}

h1 {
    color: navy;
}

Step 6: Create a JavaScript file (optional). Create script.js and add some simple JS:

script.js

console.log("JavaScript is running!");
alert("Page Loaded!");

Step 7: Preview your page. One of the best ways is using the ‘Live Server’ extension in VS Code:

1. Go to the Extensions view (Ctrl+Shift+X or the square icon on the sidebar).
2. Search for “Live Server” by Ritwick Dey and install it.
3. Once installed, right-click on your index.html file in the Explorer and select ‘Open with Live Server’. This will open your page in a browser and automatically refresh it when you save changes.

Version Control with Git

Git is an essential version control system for modern development. Install it on Ubuntu:

sudo apt update
sudo apt install git

Configure Git with your details:

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

VS Code has excellent built-in Git integration, allowing you to initialize repositories, commit changes, branch, merge, and push/pull from remote repositories like GitHub or GitLab directly from the editor.

Common Learning Obstacle: Managing different language versions and dependencies (e.g., multiple Python versions, Node.js versions). Tools like asdf-vm, nvm (for Node.js), pyenv (for Python), and Docker containers are invaluable for managing complex development setups and ensuring project-specific environments.

Actual Application Scenario: A developer is building a Node.js application. They would install Node.js (perhaps using nvm to manage versions), set up their project with npm init, install VS Code with relevant extensions (e.g., ESLint, Prettier), initialize a Git repository, and write their Express.js or React code, using VS Code’s debugger and integrated terminal.