Evilscaught/evilscaught-web

evilscaught-web

A vue-based website which will host all sorts of interesting topics.

Setting up the Development Environment

Visual Studio Code is the primary text editor used when developing this website. Using Visual Studio Code is recommended - but not required. The subsequent instructions will take you through the steps required to run the server locally on your computer.

Windows

Enabling the Windows Subsystem for Linux

Only go through these instructions if you haven't already set-up some sort of bash environment on your Windows desktop computer.

Click on the start menu and search for "Windows Features". A program titled "Turn Windows Features On or Off" should appear in the search results. Click to open the program.
Once the program has loaded there should be a list of Windows features on display. Scroll down and locate the feataure "Windows Subsystem for Linux"
Mark "Windows Subsystem for Linux" as checked, and hit the "Ok" button. An additional pop-up will appear as Windows begins configuring files, once finished you will be asked to restart you computer by the Windows service. Do so before proceding to the next step.
After your computer has been restarted, open-up the Windows PowerShell and Execute the following command to install a Linux distrobution for the Windows Subsystem for Linux.

Invoke-WebRequest -Uri https://aka.ms/wsl-ubuntu-1604 -OutFile Ubuntu.appx -UseBasicParsing

It will take a while for the download to complete.

A Microsoft app-file Ubuntu.appx will be downloaded onto your computer. It should be located in your directory C:\Users\%USERNAME%
Locate the file, double-click on it, and install it. A Bash window will open during installation.
After installation has completed you will be asked to create a Unix account. The username should be the same as the username shown in the PowerShell. If you're unsure of what the username is and where it's shown, use this PowerShell command to print it $env:UserName
Now that you've set-up the WSL, in the future you'll be able to load bash either by searching for "Bash" in the Windows start-menu or by executing wsl in the Windows PowerShell.

Tip: If you choose to launch the WSL in the PowerShell, you can always go back to the PowerShell with the exit command. Similarly the cmd command can be used to open the command-prompt.

Setting up the Bash Development Environment

These instructions assume that you've got a full-featured bash environment working in Windows.

In the WSL, download and install nvm

You can check if you already have it installed with nvm --version

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Restart the WSL
Download and install Node.js version 14.5.0

nvm install 14.5.0

npm will be automatically installed with Node.js

Once finished you can verify that node and npm were installed with node --version and npm --version
Navigate to your desired directory and clone the repository. You may be prompted to enter your GitLab credentials.

sudo git clone https://gitlab.com/Evilscaught/evilscaught-web.git

Omitting the sudo command may result in the operation being denied.

Navigate into the directory of your newly cloned repository
Run npm install --prefer-offline --no-audit --no-bin-links to install all dependencies

It is essential to include all three flags whenever running this command

Run npm run serve to start the server.
The server will be listening at https://localhost:8080.

Using the --https flag will allow you start the local server with an encrypted connection. However, firefox will warn you with a potential security risk ahead. To bypass the block, click on 'Advanced...' and then 'Accept the Risk and Continue'.
The HTTP-secure connection is required for an optimal development environment. Firefox will block any unsecure HTTP request.

File Structure

The file-structure shown below is meant to be a guide in regards to the purpose of the important files and directories. When developing the website, it would be ideal to have the text editor or IDE open in the root directory. The root directory is also where you'll be able to execute scripts such as npm run serve to start the local development server.

evilscaught-web/  # The root directory
|───node_modules/   # Contains all node package manager dependencies
|   |   ...
|
|───public/ # The public directory serves as an escape hatch from webpack
|   |   favicon.ico
|   |   index.html  # Entry point, this is where Vue injects the Root view 
|
|───src/    # The "source" directory, here are the files that "make" the website. 
|   |
|   |───assets/ # Images, audio, etc. is stored here.
|   |   |   ...
|   |   
|   |───components/ # Vue components are stored here.  
|   |   |   ...     # These are the "building blocks" of the single file components
|   |
|   |───router/
|   |   |   index.js    # Defines the routes to all the single file components
|   |
|   |───store/  # This directory is pending deletion
|   |   |   ...
|   |   
|   |───styles/ # Cascading style sheets stored here
|   |   |   ...
|   |   
|   |───views/  # Contains all the single file components (i.e. website pages)
|   |   |   ...
|   |
|   |   App.vue # All single file components are injected into the App view. 
|   |           # App view is then injected in the Root view (see main.js below)
|   |
|   |   main.js # Root view is created here and injected into ./public/index.html
|
|   .gitattributes
|   .gitignore
|   .gitlab-ci.yml  # Used by GitLab Pages for Pipelining
|   babel.config.js # Babel Global Configuration File
|   dependencies.md # Documentation on dependencies used throughout development
|   package.json 
|   npm-shrinkwrap.json # package-lock.json alternative, enforces strict dependency versioning
|   README.md
|   vue.config.js   # Global Configuration file loaded by @vue/cli-service