scroll-appear

Install

Run npm install @cipscis/scroll-appear

Usage

See Scroll Appear documentation

Development

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

1. Clone the repository using git clone https://github.com/cipscis/scroll-appear.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 six 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 and compiles any TypeScript.

• npm run prepare first removes directories containing compiled files, then lints and compiles any TypeScript. You should never need to run this task manually, the prepare script runs automatically when npm prepares your package for publishing.

Usually, you will just want to run npm start.

.env

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 = "scroll-appear"
MODE = "development"
PORT = "8080"

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

Dependencies

None.

Dev Dependencies

Development

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

Deploy

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