Serverless Functions
Relevant source files
The following files were used as context for generating this wiki page:
This project leverages Netlify's serverless platform for deployment, build automation, and backend functionality, most notably for handling form submissions. While the configuration sets up a directory for custom serverless functions, the primary implemented serverless feature is Netlify's built-in form handling, which processes submissions from the contact form without requiring a managed backend server.
The system is configured through the netlify.toml file, which dictates build commands, publish directories, and server-side rules like redirects and security headers. The frontend application is a Single Page Application (SPA) built with React, and Netlify's platform is configured to support its routing and enhance its security.
Architecture and Configuration
The serverless architecture is defined and controlled by the netlify.toml file at the root of the repository. This file configures how Netlify builds, deploys, and serves the site.
Sources: netlify.toml
Build and Function Settings
Netlify is configured to run the npm run build command to generate the static site, which is then published from the dist directory. The configuration also specifies a directory for custom serverless functions and the bundler to be used.
[build]
command = "npm run build"
publish = "dist"
[functions]
directory = "netlify/functions/"
node_bundler = "esbuild"
Sources: netlify.toml:1-7
The following diagram illustrates the build and deployment flow on Netlify.
This diagram shows the automated build and deploy process triggered by a git push, as configured in netlify.toml.
Sources: netlify.toml:1-7, package.json:7
Routing and Redirects
A redirect rule is in place to handle client-side routing for the Single Page Application (SPA). Any request that doesn't match a static file is redirected to index.html, allowing React Router to manage the route.
| From | To | Status | Description |
|---|---|---|---|
/* | /index.html | 200 | SPA fallback for all routes. |
Sources: netlify.toml:9-12
Security Headers
Netlify applies several security-related HTTP headers to all responses from the server. This is a serverless configuration that enhances the application's security posture at the edge, without any application-level code.
| Header | Value | Purpose |
|---|---|---|
X-Frame-Options | DENY | Prevents the site from being embedded in iframes (clickjacking). |
X-XSS-Protection | 1; mode=block | Enables Cross-Site Scripting (XSS) filtering in browsers. |
X-Content-Type-Options | nosniff | Prevents browsers from MIME-sniffing the content-type. |
Referrer-Policy | strict-origin-when-cross-origin | Controls how much referrer information is sent with requests. |
Permissions-Policy | camera=(), microphone=(), geolocation=() | Disables access to specified browser features like camera or mic. |
Sources: netlify.toml:14-20
Netlify Forms
The project utilizes Netlify Forms to handle submissions from the contact form. This is a serverless feature that automatically detects an HTML form with the netlify attribute and provisions an endpoint to receive its data.
Form Definition
The contact form is defined directly in index.html. It is hidden from view but is present in the DOM for Netlify's build bots to detect and 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:29-35
Key attributes for this feature are:
netlify: Marks the form for Netlify's processing.netlify-honeypot="bot-field": A spam-prevention technique. A hidden field namedbot-fieldis added; if a bot fills it out, the submission is silently rejected.
Data Submission Flow
When a user submits the contact form, the data is sent to Netlify's backend, which then handles the submission, stores it, and can trigger notifications.
The sequence diagram below shows the interaction:
This diagram illustrates the serverless processing of a form submission by Netlify.
Sources: index.html:29-35, src/pages/PrivacyPolicy.tsx:40-45
Data Privacy and Handling
The PrivacyPolicy.tsx page explicitly states how the collected form data is handled, acknowledging the role of third-party services like Netlify.
Your information will not be sold, rented, or shared with third parties. It may, however, be processed and temporarily stored through third-party services (such as Netlify), which are necessary to deliver form functionality.
Sources: src/pages/PrivacyPolicy.tsx:40-45
This confirms that the form data (name, email, message) is passed to and managed by the Netlify serverless backend.
Sources: src/pages/PrivacyPolicy.tsx:29-34, index.html:32-34
Summary
The project effectively uses Netlify's serverless capabilities to create a robust, secure, and modern web application without the need for a traditional backend. Configuration in netlify.toml handles builds, routing, and security at the edge. The most prominent serverless feature is the zero-config Netlify Forms, which captures user data from a simple HTML form defined in index.html, demonstrating a powerful integration between the frontend code and the deployment platform.