Skip to content

Instantly share code, notes, and snippets.

@ChaDonSom
Last active April 6, 2023 21:06
Show Gist options
  • Save ChaDonSom/cbafa56832098e27fca83e98688b6966 to your computer and use it in GitHub Desktop.
Save ChaDonSom/cbafa56832098e27fca83e98688b6966 to your computer and use it in GitHub Desktop.
Modern Web Development on Crostini

Getting started

  1. Enable Linux on your Chromebook, then start Terminal.
  2. From here, we will mostly focus on the command line in Terminal.

Notes

  • You should regularly (somewhere around weekly - quarterly, and also any time you start on a new machine or install some new package) update your Linux packages:
    sudo apt update
    sudo apt upgrade
    
    This is the Linux equivalent of updating your applications.
  • The distribution of Linux that Chrome OS uses is based on Debian. Troubleshooting related to Debian is generally applicable. Debian's latest version as of writing is Debian 10: Buster.

Tools

These tools are all required at some point, but each offer a world of capabilities on their own, and the first few can be installed in any order. These are mostly ordered in the order I would go about installing them on a blank machine. I'll try to articulate the reasons for the order of each, but some of them are bound to be ordered this way just for my own preference.

Tools requiring others will note as much.

Git is essentially how we manage our file history, and shared, asynchronous work, without causing irreconcilable differences.

I usually install this first, because my next step is usually to git clone the project I'm wanting to work on. Also, git is the most likely of any of these tools (except bash) to already be installed, so it's somewhat a matter of foundation for my assumptions I work by.

However, my git clone step would also be backed by my SSH setup. So, if you have a github repository you'd like to start work on, you might want to run through the SSH section first. You'll otherwise be required to supply your username and password, which is fine, just substantially slower. SSH can certainly be returned to later, in preference of starting work on something more interesting sooner.

The next steps after git clone would essentially be composer install, npm install, and constructing the database, so, usually, I'll install Composer, Node, and MySQL before running my git clone step.


If you haven't yet,

sudo apt update
sudo apt upgrade

I note updating and upgrading only here on Git, because usually, if I'm installing Git, it's the first thing I'm doing, so I'd better go ahead and update my packages first.

Then, sudo apt install git-all

MySQL runs a database server which uses SQL - Structured Query Language. It is what we use for persistent data storage.

Since a functioning database is part of starting up a new or existing project, if I don't have mysql installed already, I'll go ahead and get it done.


sudo apt install mysql-server

Or, if mysql-server is unavailable (I've seen some Linux machines not have it in their package repositories):

sudo apt install mariadb-server

MariaDB is a drop-in replacement for MySQL. Its command-line tool is invoked using the same mysql term.

To start the service if it's not running:

sudo service mysql start

Thereafter, the mysql service generally starts on your machine's startup. However, if it doesn't, this command would be how you would start it. There are also other options like init.d or .bashrc/.bash_profile.

Node runs Javascript on the command line. In our use-case, it's for managing our Javascript libraries, and compiling/bundling/building our code.

Node is another prerequisite - it could technically be installed any time before Laravel / Vue.

Refer to Node's version timeline for which version to use - we're still on 12. We have until around April 2022 to update to Node 14.

sudo apt install curl software-properties-common
curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -
// it should show a suggestion to run this:
sudo apt install -y nodejs

// if it suggests to install build tools, run that as well
sudo apt install gcc g++ make

PHP is our server language. Its lifecycle generally starts when the server gets a request and hands it off to PHP to fulfill it. However, PHP can also be run from the command line.

PHP can be installed any time before Composer.

PHP is hosted on a third-party apt repo, so we have to add that to our Linux machine's list.

sudo apt install ca-certificates apt-transport-https 
wget -q https://packages.sury.org/php/apt.gpg -O- | sudo apt-key add -
# Make sure to use the right version name here! May not be 'stretch'
echo "deb https://packages.sury.org/php/ stretch main" | sudo tee /etc/apt/sources.list.d/php.list
sudo apt update
sudo apt install php7.4 php7.4-mysql php7.4-common php7.4-mbstring php7.4-xml php7.4-zip zip unzip php7.4-curl php7.4-gd php7.4-bcmath

This bash script is helpful:

(save as a shell script (example.sh) and run by typing . example.sh)

#!/bin/bash
# To add this repository please do:

if [ "$(whoami)" != "root" ]; then
    SUDO=sudo
fi

${SUDO} apt -y install apt-transport-https lsb-release ca-certificates curl
${SUDO} wget -O /etc/apt/trusted.gpg.d/php.gpg https://packages.sury.org/php/apt.gpg
${SUDO} sh -c 'echo "deb https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/php.list'
${SUDO} apt update

Requires PHP

A PHP package manager, which we use to install & update Laravel, as well as bring in any dependencies we need.

Composer must be installed before Laravel.

refer to composer's instructions for latest hash

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

sudo mv composer.phar /usr/bin/composer

NPM (Node Package Manager)

Comes with Node

We use npm to manage our Node packages. Since Node is Javascript for the backend/server, we can import Node packages into our frontend JS files and they will work in the browser. Most third-party libraries are imported this way.

Comes with Laravel

Webpack pulls all the files together and combines them in the way we determine.

Requires Laravel or NPM

Vue is a frontend Javascript framework that focuses on ease-of-learning and progressive enhancement for power users. For example, their router and store solutions are separate libraries that Vue can be used without.

Vue code, being frontend code, only runs once we get to the browser. The Vue devtools extension greatly helps with inspecting Vue application state and generally debugging Vue code.

Bash (Born-Again SHell)

The language of our Terminal.

I have actually not found any resources on Bash that are as superlative as the Laravel, Vue, or even PHP documentation. If you find any, I would love to know about them!

SSH (Secure SHell)

A means of authentication via key files, rather than using passwords. Setting up SSH authentication for Github greatly improves the workflow of syncing your changes with the canonical version (the repository).

We maintain a practice of git pulling and git pushing often. After so many times providing your name and password with every action, the time saved adds up.

Some tips that I've collected over my 2 years so far:

SSH automatically looks in the user's personal .ssh directory for key files. Simply put one called id_rsa along with id_rsa.pub in there, and SSH will automatically attempt that key for every SSH connection you make.

You can make a file called config in the .ssh directory, and SSH will modify its connection behavior based on rules you define in there. Here's mine:

Host azimuth azm
        Hostname 192.168.1.7
        User chase

Host *.pumpfleet.com blacklab*.com
        User forge

Host *
        IdentityFile ~/.ssh/chase

Since I didn't know to leave my key as id_rsa when I created it, I have to provide the Host * rule to apply it.

@jcoonrod
Copy link

jcoonrod commented Apr 4, 2023

This is tremendously useful, thank you. I also install the google-cloud-cli, which these days is REALLY slow to install, and so I recommend that anyone installing it do that first, as the size of the install and man databases seems to make the install even slower. Also, you mention the commands sudo apt-get update (etc) but really now you just need to type sudo apt update (etc).

@ChaDonSom
Copy link
Author

Hey, that's true πŸ˜…

Wow, I can't even remember writing this! My, it sure is strange to actually be contacted about it πŸ˜…

I do tend to use apt rather than apt-get nowadays. I'll go ahead and update this for that. I only had one reason I haven't been updating this: I didn't think anyone was reading it πŸ˜…

I tend to use Laravel and Laravel Forge for deployment, so I use AWS more, but I haven't gotten much into the cli side of cloud yet. I did work with Google Cloud in the beginning, and I think it has far better UX than AWS, hands down πŸ˜…

@ChaDonSom
Copy link
Author

I suppose, by now, I have quite a few differences from this.

I usually try to install Node using nvm. I've definitely upgraded from Node 12 by now! πŸ˜† I think I'm at 18 now.

I'm using PHP 8.x at this point.

I do still use Webpack, but I use Vite for all my new projects, and I'm trying to get my main project switched over to it as soon as possible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment