The objective of this lecture is to set up our environment and get a basic website up and running and acessible from anywhere in the internet.

Before we do that however please read the syllabus with care. The format of this course is very different from any other course you might have taken before.

Objective: Syllabus Quiz

When you are ready go and fill out the Syllabus Quiz. You have unlimited time but only a single attempt. You need to score at least 8 / 10 points for the objective to be counted. After finishing the quiz your score will be displayed and you can access the link again to show the score (when your partner is grading your objectives at the beginning of the next lecture).

VSCode Extensions

Please install the following VSCode extensions. Mac Users Note you won't need to install WSL and thus all extensions will be under the same group Local. VS Code Extensions

Here is a short description of what they do:

One Dark Pro hands down my most favorite color template.
ElixirLS the most important of all plugins. Provides syntax highlighting, debugger, in-line context menu, problem detection, autocomplete and much, much more.
Tailwind CSS IntelliSense will detect classes in your templates, format and order Tailwind classes, and provide quality of live features for our frontend engine.
Elixir snippets, Phoenix Snippets they provide handy shortcuts to bootstrap and quickstart features such as functions, modules, and docstrings.
Phoenix Framework. Phoenix has it's own template files .heex (Embedded Elixir). To make those sections look nice we need that.
WSL (Windows only) Switches the terminal from your windows prompt to linux shell. Also switches file/folder structure to linux environment. Linux/Unix is widely prefered when it comes to Web Development as tool chains are much more supported.
Markdown Preview Enhanced (optional) Convenient plugin that lets you preview markdown files directly in VSCode. Useful to keep your README.md and CHANGELOG.md maintained.

VS Code Settings

Please take a look at my settings.json file. You can access/change yours by hittin CTRL/CMD + ,. I have commented useful sections that you should copy/change in your environments.

{
  "[c]": {
    "editor.rulers": [
      80
    ],
    "editor.wordWrapColumn": 80,
    "files.trimFinalNewlines": false
  },
  // Settings to be overridden for [elixir] language specifically. If you like those settings you can move them to global scope instead.
  "[elixir]": {
    "editor.acceptSuggestionOnEnter": "off",
    "editor.formatOnType": true,
    "editor.insertSpaces": true,
    "editor.trimAutoWhitespace": false,
    "editor.wordBasedSuggestions": "off",
    "files.trimFinalNewlines": true
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.rulers": [
      80
    ],
    "editor.wordWrapColumn": 80,
    "files.trimFinalNewlines": false
  },
  "css.validate": false,
  "debug.console.fontSize": 11,
  # this will likely be different on Windows/Mac. You can simply use the default fonts by removing this line.
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 12,
  "editor.formatOnSave": true,
  # Find little use for the minimap and it only takes away space
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "none",
  # Elixir line width standard is 98 columns, you definately want to increase the default to this
  "editor.rulers": [
    98
  ],
  "editor.scrollBeyondLastLine": false,
  # Universal tab size standard is 2 spaces. 4 for older languages and perhaps Python. I recommend setting this globally to 2 and overwritting it to 4 for languages that you want it to be 4.
  "editor.tabSize": 2,
  "editor.wordWrap": "wordWrapColumn",
  "editor.wordWrapColumn": 98,
  "elixirLS.fetchDeps": true,
  "elixirLS.projectDir": ".",
  "elixirLS.suggestSpecs": false,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "explorer.openEditors.sortOrder": "alphabetical",
  # Add this to enable syntax highlighting for .heex files
  "files.associations": {
    "*.heex": "phoenix-heex"
  },
  "files.autoSave": "afterDelay",
  "files.eol": "\n",
  # This will hide the follwoing files/folders from your File Inspector in order to declutter the Sidebar.
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.project": true,
    "**/CVS": true,
    "**/__pycache__/": true,
    "**/node_modules": true,
    ".elixir_ls/": true,
    // ".github/": true,
    "_build/": true,
    "cover/": true,
    "deps/": true
  },
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "javascript.updateImportsOnFileMove.enabled": "always",

  # You will open files mostly via CTRL/CMD + P. You will want to exclude the follwoing files/folders from the smart search
  "search.exclude": {
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/package-lock.json": true,
    "**/priv/static/": true,
    "/.elixir_ls": true,
    "/.vscode": true,
    "/_build/": true,
    "/deps": true
  },
  "security.workspace.trust.enabled": false,
  "security.workspace.trust.startupPrompt": "never",
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.fontSize": 11,
  "update.showReleaseNotes": false,
  "workbench.activityBar.location": "top",
  "workbench.colorTheme": "One Dark Pro",
  "workbench.editor.enablePreview": false,

  // The next three lines allow you to automatically close the oldest tab once you reach 5 opened tabs. Keeps your editor clean and your sanity preserved.
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.perEditorGroup": true,
  "workbench.editor.limit.value": 5,

  "workbench.editor.tabActionCloseVisibility": false,
  "workbench.editor.tabSizing": "shrink",
  "workbench.panel.defaultLocation": "bottom",

  // Make sure nothing is overwriting your One Dark Pro theme.
  "workbench.preferredDarkColorTheme": "One Dark Pro",

  "workbench.preferredLightColorTheme": "Slack Theme Aubergine",
  "workbench.settings.editor": "json",
  "workbench.settings.openDefaultSettings": true,
  "workbench.settings.useSplitJSON": true,
  "workbench.startupEditor": "none"
}

Installation

We need to install elixir/phoenix and some dependencies and the process is different if you are working on a windows machine or mac. I highly recommend you to use your own laptops for development but you are required to deploy your production version to the bucknell servers so your web application is accessible in the internet.

Please read the following correct subsection for your environment.

Windows Guide

First you will need to install WSL if you haven't already. This official guide should help: https://learn.microsoft.com/en-us/windows/wsl/install

The default distribution (ubuntu) is fine, use a short username such as your nickname or firstname when prompted. Don't forget your password.

You can now install/open VSCode in WSL mode by clicking the blue button in the bottom left: Open WSL

At this point you can use the linux terminal by opening it via CTRL + ~. All commands from here on assume you use the linux shell inside vscode.

Next i recommend you to disable the password prompt everytime you try a sudo command. You may need to exit and reopen your shell for the change to take effect.

Installing Elixir/Erlang

From the official installation documentation:

$ sudo add-apt-repository ppa:rabbitmq/rabbitmq-erlang
$ sudo apt update
$ sudo apt install git elixir erlang

This might take a while but should get elixir and erlang installed. If you encounter any problems you can try installing asdf and elixir/erlang through it. I had much success with it.

Ultimately you know you have been successful if the following command works and returns the elixir version:

  elixir --version

Erlang/OTP 27 [erts-15.1.2] [source] [64-bit] [smp:24:24] [ds:24:24:10] [async-threads:1] [jit:ns]

Elixir 1.17.3 (compiled with Erlang/OTP 27)

Installing Postgres

We now need to install postgres as our backend SQL database service. This is a great guide you can follow. Make sure

when selecting the password for postgres user to set it to postgres as well.
when creating your first database create it with the same name as the postgres user instead of the mydb:

createdb postgres

If you get an error that the postgres database already exists then you can skip this step and you are done.

Test your installation with

psql --version

psql (PostgreSQL) 16.4 (Ubuntu 16.4-1.pgdg22.04+1)

MacOS Guide

The best way to install Elixir/Erlang/Postgres on MacOS is via . Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install elixir

Ultimately you know you have been successful if the following command works and returns the elixir version:

  elixir --version

Erlang/OTP 27 [erts-15.1.2] [source] [64-bit] [smp:24:24] [ds:24:24:10] [async-threads:1] [jit:ns]

Elixir 1.17.3 (compiled with Erlang/OTP 27)

Then follow this guide to install postgres.

Test your installation with

psql --version

psql (PostgreSQL) 16.4 (Ubuntu 16.4-1.pgdg22.04+1)

If you selected version 15 and see 15.x as a result thats fine, both 15 and 16 work well.

Next set a password for the postgres. The following will switch you to the postgres user account:

sudo -i -u postgres

You can now open psql

psql

In psql (this is the direct interface to the database) you can set a password:

ALTER USER postgres WITH PASSWORD 'postgres';

Now you can run exit (twice, subsequently) to get you back to your workspace as the default user.

Installing Hex and Phoenix (Windows and Mac)

mix archive.install hex phx_new

(Windows only) also install inotify-tool for auto-page reloading:

sudo apt-get install inotify-tools

Cloning personal repository and creating Phoenix Project

Now head over to gitlab. You can find your personal link on the course website under Resources/Gitlab

In your VSCode terminal navigate to (create if path doesn't exist)

~/workspace

Clone your repository

git clone <yourlink.git>

Careful! This will only work if you have set up ssh publickey authentication correctly. If not watch this video around the 3:15min mark on how to do this.

Do not go into your cloned folder yet. We are going to create the phoenix repository from ~/workspace so we don't have to move our files afterwards.

Start by renaming your folder to csci379, for example:

mv z csci379

mix phx.new csci379 --app app

Do not change the app name from app and make sure you are not altering any optional arguments that you may explore via mix help phx.new.

When prompted whether you would like to install dependencies, confirm yes.

Creating a VSCode workspace

Let's now create a VSCode workspace from our cloned folder. In VSCode go to File > Open Folder and navigate to ~/workspace/csci379.

You should see your folder being popolated with a bunch of files and folders!

You will now want to go again to File > Save Workspace As. and name it csci379.

This should create yet another file in your folder and the overall folder structure should look like this:

Fantastic! All that remain is to create the database:

mix ecto.create

And run the server:

mix phx.server

A testwebsite should now be accessible on http://localhost:4000 and you are done, huray!

Phoenix Startpage

Introduction and Getting Online

Objectives