Portfolio

You will need to install Node.js before working on this project.

1. Clone the repository using git clone https://github.com/cipscis/portfolio.git.
2. Run npm install to install development dependencies.
3. Create a .env file.
4. Run npm start to run the local server and watch CSS and JS files for changes.

This project creates five npm tasks:

• npm run server runs a Node.js server on the port specified in the .env file, using Express.

• npm run build compiles CSS files using gulp-sass, then compiles TypeScript and bundles JavaScript using Webpack.

• npm run watch first runs the build task, then watches the relevant directories and reruns the build task if it sees any changes.

• npm start runs both the server and watch tasks simultaneously.

• npm test lints any TypeScript.

Usually, you will just want to run npm start.

The .env file contains the following environment variables:

• PROJECT_NAME (string)

If present, used by Express to set up redirects for emulating GitHub Pages.

• MODE (string 'development' | 'production')

Used by Webpack to determine what optimisations to use and how to generate sourcemaps.

• PORT (int)

Used by Express to determine which port to use when running a local Node.js server.

An example .env file you can use for development is:

PROJECT_NAME = "portfolio"
MODE = "development"
PORT = "8080"

This file is intended to differ from environment to environment, so it is ignored by Git.

None.

These dependencies are used when working on the project locally.

• Node.js: Runtime environment

• npm: Package manager

• Gulp: Task runner

• TypeScript: JavaScript extension for static type checking

• sass: Compiling CSS from Sass

  • gulp-sass: Using the sass compiler with Gulp

• Webpack: For JavaScript dependency management, used with Gulp

  • ts-loader: For compiling TypeScript using Webpack

  • resolve-typescript-plugin: For using ES Module syntax with Webpack's ts-loader

• Express: Running a Node.js server, accessed at http://localhost:<PORT>

• Concurrently: Running server and development build tasks concurrently

• dotenv: Reading environment variables from .env file

• eslint: Linting TypeScript files

  • @typescript-eslint/eslint-plugin: Allows eslint to lint TypeScript

  • @typescript-eslint/parser: Allows eslint to parse TypeScript

These dependencies are used for deploying the project to GitHub Pages.

• checkout: Used to check out the repository to a workspace so it can be built

• Deploy to GitHub Pages: Used to deploy the project to GitHub pages once it has been built