SHIPPED/TOOLS
Independent developer field guide
Edition 0012026
Stack recipe · Marketing

React marketing site with Vite and Formspree on Netlify

For founders who need an interactive React marketing site with a lead capture form and no backend server to maintain.

This recipe is assembled from official documentation and was not built end to end for this page.

The parts

Role Tool Why
Bundler Vite Vite provides fast hot module replacement and optimized production bundles for modern React applications.
Hosting Netlify Netlify provides continuous Git deployments, deploy previews, SSL certificates, and global asset delivery.
Forms Formspree Formspree handles form submissions, spam filtering, and email notifications through an API endpoint or React library.

Why this stack fits

Marketing sites often need more than static brochures. They may include product configurators, calculator widgets, dynamic pricing toggles, and lead capture forms. Vite and React with Netlify and Formspree make a frontend setup that needs little infrastructure upkeep.

Vite is the frontend build tool and local dev server. As explained on the Vite official website and the Vite guide, Vite provides native ES module serving during local development for fast hot module replacement, paired with an optimized production build. For teams shipping interactive React components, this keeps builds fast and outputs optimized static JavaScript, CSS, and HTML.

Netlify serves static frontend assets globally and runs the deployment pipeline. According to the Netlify official website and Netlify documentation, Netlify automatically triggers builds from Git branches, provisions SSL certificates, and generates shareable deploy previews. This allows marketing managers and stakeholders to review new product copy and design variations on live URLs before publishing to production.

Formspree handles inbound inquiries without requiring a backend server. As detailed on the Formspree official website and Formspree documentation, Formspree allows developers to connect HTML forms or React components to an endpoint that filters spam and sends submissions to the team by email.

How the components connect

The components are decoupled:

  1. Development and building: Developers create marketing components and interactive demonstrations in React. When changes are pushed to version control, Netlify runs npm run build via Vite, outputting minified bundles into the dist/ directory.
  2. Edge delivery and SPA routing: Netlify deploys the bundled files across its edge network. To ensure client-side routing works smoothly when visitors navigate directly to sub-paths, a public/_redirects file is included with /* /index.html 200.
  3. Form handling: Visitors submit contact requests, demo signups, or sales queries through a React form. The form sends an AJAX POST request directly to Formspree, which applies spam filtering and forwards the lead notification to the team's inbox.
  4. Built-in alternative: Sites hosted on Netlify can alternatively use Netlify's native form capability without third-party services. As documented in the Netlify Forms setup guide, adding a data-netlify="true" or netlify attribute to an HTML form allows Netlify's build system to automatically detect the form and capture submissions in the Netlify dashboard.

What it costs to run

This marketing stack uses lightweight freemium tiers:

  • Vite: Fully open source under the MIT license with zero software fees (Vite License).
  • Netlify: Operates on a freemium pricing model, with a free plan that includes continuous Git deployments and monthly usage credits (Netlify Pricing).
  • Formspree: Operates on a freemium model, offering a free plan with a monthly submission limit and email delivery, with paid plans available for higher submission volume and team workflows (Formspree Plans).

When to pick something else

Consider alternate solutions based on project constraints:

  • Netlify Forms: If you prefer to eliminate third-party form accounts and keep all submission records inside your hosting dashboard, switch to Netlify's built-in form detection as detailed in the Netlify Forms setup guide.
  • Astro: If your marketing site consists predominantly of static editorial copy, documentation, and blog posts with minimal interactive React widgets, adopting Astro provides faster initial page loads by rendering static HTML by default and hydrating components only on demand, as described on the Astro official website.

Setup steps

  1. Scaffold a React application with Vite using npm create vite@latest my-marketing-site -- --template react.
  2. Develop responsive marketing layouts, interactive feature showcases, and call-to-action sections with React components.
  3. Integrate Formspree into the contact form using the Formspree React library or direct POST endpoint.
  4. Add a public/_redirects file containing /* /index.html 200 to route client-side navigation properly on Netlify.
  5. Run npm run build locally to verify asset bundling into the dist output directory.
  6. Connect the Git repository to Netlify to configure continuous deployment and branch previews.

Tradeoffs

  • Single-page React applications require explicit redirect rules like /* /index.html 200 to prevent 404 errors on deep page refreshes on static hosts.
  • Client-side rendering requires extra consideration for search engine crawlers and social media preview tags compared to static site generators.
  • Formspree free plan imposes a monthly submission limit that requires upgrading to paid plans as inquiry volumes grow.

Swap options

Forms: Netlify. Swap to Netlify Forms for built-in HTML form detection without external third-party form dependencies.