Available Scripts

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• scripts/optimize-images.js
• netlify.toml
• eslint.config.js
• README.md

The scripts defined in this project are essential for managing the development, build, linting, and asset optimization lifecycle. They leverage tools like Vite, ESLint, and Sharp to ensure a streamlined and efficient workflow from local development to production deployment. These scripts are configured in the package.json file and support the project's Feature-Sliced Design (FSD) architecture.

Sources: package.json:8-14, README.md:30-31

Scripts Overview

The following table provides a summary of all available NPM scripts, their purpose, and the commands they execute.

Script	Command	Description
dev	vite	Starts the Vite development server for local development.
dev:host	vite --host	Starts the Vite development server and exposes it on the local network.
build	vite build	Creates a production-ready build of the application in the dist directory.
lint	eslint .	Runs ESLint to analyze the codebase for potential errors and style violations.
preview	vite preview	Serves the production build from the dist directory locally to preview the final application.
optimize-images	node scripts/optimize-images.js	A custom script to find, convert, and optimize images (.png, .jpg) to the .webp format.

Sources: package.json:8-14

Development Scripts

These scripts are used for running the application in a local development environment with hot-reloading capabilities provided by Vite.

Sources: package.json:9-10

npm run dev

This command starts the standard Vite development server. It is the primary command used for development.

npm run dev:host

This variant of the development script runs the Vite server with the --host flag. This exposes the server on the local network, allowing other devices on the same network to access the development build.

Build and Deployment

The build process is managed by Vite and configured for deployment on Netlify.

npm run build

This script compiles the TypeScript and React code, bundles assets, and outputs the static files into the dist directory. This command is executed by Netlify during the deployment process.

Sources: package.json:11, netlify.toml:2

The diagram below illustrates the build and deployment flow.

The netlify.toml file specifies that the npm run build command should be run and that the dist directory should be used as the publish directory. It also configures a redirect rule to serve index.html for all paths, which is standard for single-page applications.

Sources: netlify.toml:2-3, 9-11

Code Quality

npm run lint

This script uses ESLint to enforce code quality and architectural boundaries. The configuration in eslint.config.js is crucial for maintaining the project's Feature-Sliced Design (FSD) structure. It prevents illegal imports between architectural layers, ensuring the codebase remains scalable and maintainable.

For example, the rules disallow the shared layer from importing from any higher layers like widgets or pages.

// eslint.config.js:41-45
{
  from: "shared",
  disallow: ["app", "pages", "widgets", "features", "entities"],
  message: "Shared layer cannot import from higher layers.",
},

Sources: package.json:12, eslint.config.js:39-61, README.md:30

Asset Optimization

npm run optimize-images

This is a custom Node.js script that automates the optimization of image assets. It uses the sharp library to process images, improving performance by reducing file sizes and converting them to the modern .webp format.

*Sources: package.json:14, scripts/optimize-images.js

Process Flow

The script performs the following steps:

1. Identifies target directories: /public/projects and /public/certs.
2. Recursively scans these directories for image files with .png, .jpg, or .jpeg extensions.
3. For each image found, it converts it to .webp format with a quality setting of 80.
4. If an image's width is greater than 800px, it is resized to a maximum width of 800px.
5. The original image file is deleted after the .webp version is successfully created.
6. It also processes a root profile-image.jpg or profile-image.png if it exists, resizing it to 500px width.

The following diagram visualizes the image optimization process.