Deployment to Netlify

Relevant source files

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

• netlify.toml
• package.json
• index.html
• README.md
• src/entities/project/model/data.ts
• src/app/App.tsx

This document outlines the configuration and processes for deploying the "2026 Gold Standard Portfolio" project to Netlify. The project is a modern web application built with React 19 and Vite, and its deployment strategy is managed primarily through the netlify.toml configuration file. Netlify is highlighted as a key technology for this project, handling the build, deployment, routing, and serverless functions.

The deployment setup leverages Netlify's continuous integration and deployment (CI/CD) pipeline. It is configured to build the Vite project, publish the static assets, handle SPA routing, manage serverless functions, and enforce security headers. The project also utilizes Netlify's built-in form handling for the contact form.

Sources: README.md:15, netlify.toml, package.json

Build and Deployment Configuration

The core of the deployment process is defined in netlify.toml and package.json. These files instruct Netlify on how to build the application and which directory to serve.

Sources: netlify.toml, package.json

Build Settings

The [build] section in netlify.toml specifies the essential commands and directories for the build process.

Setting	Value	Description
command	npm run build	The command Netlify executes to build the site. This script is defined in package.json.
publish	dist	The directory containing the production-ready static files that Netlify will deploy.

Sources: netlify.toml:1-3

The npm run build command, in turn, executes vite build as specified in the scripts section of package.json.

{
  "scripts": {
    "dev": "vite",
    "dev:host": "vite --host",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "optimize-images": "node scripts/optimize-images.js"
  }
}

Sources: package.json:5-12

Deployment Flow

The following diagram illustrates the automated deployment flow from a git push to the live site on Netlify.

Sources: netlify.toml:2-3, package.json:8

Dependencies

The project includes netlify-cli as a development dependency, allowing developers to run a local development environment that emulates the Netlify platform, including serverless functions and redirects.

Sources: package.json:49

Routing and Redirects

As a Single Page Application (SPA) using react-router-dom, the project requires a specific server-side configuration to handle client-side routing correctly.

Sources: netlify.toml:11-14, src/app/App.tsx:2,39-92

SPA Redirect Rule

The [[redirects]] configuration in netlify.toml ensures that all incoming requests for any path are redirected to index.html. This allows the React application to load and react-router-dom to take control of routing on the client side.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Sources: netlify.toml:11-14

The following diagram shows how a user request to a deep link like /projects is handled.

Sources: netlify.toml:11-14, src/app/App.tsx:51-57

Serverless Functions

The netlify.toml file includes a configuration block for Netlify Functions, even if no functions are currently implemented.

[functions]
  directory = "netlify/functions/"
  node_bundler = "esbuild"

Sources: netlify.toml:5-7

Function Configuration

Setting	Value	Description
directory	netlify/functions/	Specifies the folder where serverless function source files are located.
node_bundler	esbuild	Configures esbuild as the bundler for Node.js functions, which is faster than the default zisi.

Sources: netlify.toml:5-7

Note: Based on the provided source files, the netlify/functions/ directory does not exist, indicating that while the project is set up for serverless functions, none are currently implemented.

Form Handling

Netlify's built-in form handling is enabled by adding specific attributes to a standard HTML form. The project utilizes this for its contact form. A hidden form is included in index.html for Netlify's crawlers to detect during the build process.

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="hidden" name="bot-field" />
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>

Sources: index.html:30-35

This setup allows form submissions to be captured and managed directly within the Netlify UI without requiring any backend code. The netlify-honeypot field is a common technique to prevent spam submissions from bots.

Security Headers

To enhance security, the application is configured to serve specific HTTP headers for all requests. These are defined in the [[headers]] section of netlify.toml.

Header	Value	Purpose
X-Frame-Options	DENY	Prevents the site from being embedded in an <iframe>, mitigating clickjacking attacks.
X-XSS-Protection	1; mode=block	Enables the browser's built-in cross-site scripting (XSS) filter.
X-Content-Type-Options	nosniff	Prevents the browser from MIME-sniffing a response away from the declared content-type.
Referrer-Policy	strict-origin-when-cross-origin	Controls how much referrer information is sent with requests.
Permissions-Policy	camera=(), microphone=(), geolocation=()	Explicitly disables access to the camera, microphone, and geolocation APIs.

Sources: netlify.toml:16-22

Conclusion

The deployment to Netlify is a streamlined and automated process governed by the netlify.toml file. It effectively handles the build pipeline for a Vite-based React application, manages SPA routing, provides a foundation for serverless functions, secures the application with HTTP headers, and integrates form handling with zero backend code. This configuration makes Netlify a robust and efficient platform for hosting the portfolio project.

Sources: README.md:15, netlify.toml