Deployment Guide
Relevant source files
The following files were used as context for generating this wiki page:This guide provides technical instructions for building and deploying the ai-saas-landing project. The project is a modern single-page application (SPA) built with React and the Vite development tool. The output of the build process is a set of static files (HTML, CSS, JavaScript) that can be hosted on any static web hosting provider.
The core of the application is structured around a main App component which orchestrates the rendering of various UI sections like Hero, Features, and CostCalculator. The entire application is rendered into a single div element with the ID root in the main index.html file.
Sources: package.json, src/App.jsx:16-29, index.html:15-16
1. Prerequisites
Before building the application, the development environment must have Node.js and a compatible package manager (e.g., npm, yarn) installed. These tools are required to install project dependencies and run the build scripts defined in package.json.
Sources: package.json, README.md:1-3
2. Project Dependencies
The project relies on several external libraries for its functionality and development process. These are managed in package.json.
2.1. Production Dependencies
These are the libraries required for the application to run in a production environment.
| Package | Version | Description |
|---|---|---|
cobe | ^0.6.5 | Used for rendering the interactive globe visualization. |
framer-motion | ^12.23.24 | Powers the animations and transitions throughout the UI. |
lucide-react | ^0.554.0 | Provides the icon set used across components. |
react | ^19.2.0 | The core library for building the user interface. |
react-dom | ^19.2.0 | Serves as the entry point to the DOM and for rendering React components. |
Sources: package.json:13-18
2.2. Development Dependencies
These packages are necessary for the local development and build process but are not included in the final production bundle.
| Package | Version | Description |
|---|---|---|
@vitejs/plugin-react | ^5.1.1 | Vite plugin to enable React support with Fast Refresh. |
autoprefixer | ^10.4.22 | PostCSS plugin to parse CSS and add vendor prefixes. |
eslint | ^9.39.1 | Tool for identifying and reporting on patterns in JavaScript. |
postcss | ^8.5.6 | A tool for transforming CSS with JavaScript plugins. |
tailwindcss | ^3.4.17 | A utility-first CSS framework for styling the application. |
vite | ^7.2.4 | The build tool and development server for the project. |
Sources: package.json:20-31
3. Build Process
The build process is orchestrated by Vite and is defined in the scripts section of the package.json file.
Sources: package.json:6-11
The following diagram illustrates the steps to create a production build.
This diagram shows the sequence of commands and processes involved in creating a production-ready build of the application.
Sources: package.json:8, tailwind.config.js, postcss.config.js
3.1. Build Command
To generate the static assets for deployment, run the following command from the project's root directory:
npm run build
This command executes vite build, which performs the following actions:
- It starts from the entry point defined in
index.html(/src/main.jsx). - It traverses the component tree, starting with
App.jsx. - It bundles all necessary JavaScript and React code.
- It processes all CSS, including Tailwind CSS directives found in files like
src/index.css. - It outputs the optimized, minified, and transpiled static files into a
dist/directory.
Sources: package.json:8, index.html:16, src/App.jsx, src/index.css
3.2. Styling Configuration
The build process includes CSS processing via PostCSS and Tailwind CSS. The configuration in tailwind.config.js specifies which files to scan for utility classes.
// tailwind.config.js:2-5
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
The postcss.config.js file confirms that tailwindcss and autoprefixer are used as plugins.
Sources: tailwind.config.js:2-5, postcss.config.js:2-6
4. Deployment
Once the npm run build command has been successfully executed, a dist/ directory will be created in the project root. This directory contains all the static assets required to run the application.
To deploy the application, the entire contents of the dist/ directory must be uploaded to a static web hosting service.
The following diagram shows a typical CI/CD deployment flow for this type of application.
This sequence diagram outlines a common automated deployment pipeline for a Vite-based React application.
4.1. Previewing the Production Build
Before deploying, you can preview the production build locally. The package.json file includes a preview script for this purpose.
npm run preview
This command runs vite preview, which starts a simple local static web server that serves the files from the dist/ directory. This is useful for verifying that the build was successful and the application runs as expected in a production-like environment.
Sources: package.json:10
5. Summary
The deployment process for the ai-saas-landing project is a standard procedure for a Vite-based static web application. It involves installing dependencies, running a single build command to generate static assets, and deploying the resulting dist/ directory to a suitable hosting provider. The tooling is configured via package.json, tailwind.config.js, and postcss.config.js to produce an optimized and production-ready build.
Sources: package.json, README.md