Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nicolasgrajaleshoyos/portafolio/llms.txt

Use this file to discover all available pages before exploring further.

Portfolio Moderno uses Vite 6 to compile TypeScript and bundle all assets for production. Running the build command produces a fully static site in the dist/ directory — no server-side rendering required — so the output can be served by any static hosting provider without additional configuration.

​
Running the Build

1

Install dependencies

Make sure all project dependencies are installed before building. Use whichever package manager you prefer:
npm install
2

Run the build command

Execute the build script defined in package.json. Vite reads vite.config.ts, resolves all imports, and bundles the application:
npm run build
3

Understand what happens during the build

Vite processes the project in two stages. First, it resolves TypeScript through its internal esbuild pipeline (using the compiler options in tsconfig.json as a reference). Then it bundles, tree-shakes, and minifies all JavaScript and CSS assets into the dist/ directory. Static files in the public/ folder are copied into dist/ as-is, without hashing.
4

Preview the production build locally

Before deploying, spin up Vite’s built-in preview server to verify the production bundle behaves as expected:
npm run preview
The preview server starts on http://localhost:4173 by default.
Always use npm run preview (or the equivalent for your package manager) rather than serving the dist/ folder with a generic HTTP server. Vite’s preview server correctly handles SPA routing during local testing, ensuring navigation behaves the same way it will on a properly configured static host.

​
Build Output

After a successful build the dist/ directory contains everything needed to serve the site: 
dist/
├── index.html           # Entry HTML with injected asset hashes
├── assets/
│   ├── index-[hash].js  # Bundled and minified JavaScript
│   └── index-[hash].css # Bundled and minified CSS
└── icons/               # Copied from public/icons/ as-is
Vite appends a content hash to every JavaScript and CSS filename (for example index-3a8f2c1b.js). This makes long-term browser caching safe — when source code changes, the hash changes and the browser fetches the updated file automatically. Files copied from public/ (such as icons/) are transferred verbatim with their original names and no hashing applied.

​
TypeScript Configuration

The tsconfig.json at the project root configures the TypeScript compiler for this project. The settings most relevant to the production build are:
OptionValueEffect
targetES2022Outputs modern JavaScript that matches the capabilities of current evergreen browsers.
moduleResolutionbundlerUses Vite-aware module resolution, allowing bare specifier imports the same way Vite resolves them at build time.
isolatedModulestrueEnsures each file can be transpiled independently, which is required for Vite’s fast esbuild-based transform.
noEmittrueTypeScript performs type-checking only; Vite’s esbuild pipeline handles the actual transpilation.
allowJstrueAllows JavaScript files (such as postcss.config.js) to be included in the project without errors.
Note that the project does not enable strict: true. Options such as experimentalDecorators and useDefineForClassFields are configured independently where needed.

​
Environment Variables

vite.config.ts uses Vite’s loadEnv helper to read variables from a .env file at build time. The GEMINI_API_KEY variable is injected into the bundle under two names so that different parts of the codebase can reference it consistently:
vite.config.ts
define: {
  'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
  'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
}
Create a .env file in the project root and add your key before running the build:
.env
GEMINI_API_KEY=your_api_key_here
.env.local is listed in .gitignore (matched by the *.local pattern), and the dist/ directory is also excluded from version control. Never commit API keys or any file containing secrets to source control. Use .env.local for local secrets — it is ignored by Git automatically — and configure the key as an environment variable or secret in your hosting platform’s dashboard for production deployments.

Build docs developers (and LLMs) love

Get started for freeTalk to us