Skip to main content

​
Build Process

Tienda ETCA uses Vite for building the production-ready application. The build process optimizes your code for performance and creates static assets ready for deployment.

​
Production Build

1

Run the Build Command

Execute the build script defined in package.json:
npm run build
This runs vite build which:
  • Bundles all JavaScript and CSS files
  • Minifies and optimizes code
  • Processes and optimizes assets
  • Generates source maps
  • Creates a production-ready dist/ directory
2

Verify Build Output

After a successful build, check the dist/ directory:
ls -la dist/
You should see:
  • index.html - Main HTML entry point
  • assets/ - Optimized JavaScript, CSS, and other assets
  • vite.svg - Static assets from the public/ directory
  • _redirects - Routing configuration for SPAs

​
Build Output Structure

dist/
├── index.html
├── assets/
│   ├── index-[hash].js
│   ├── index-[hash].css
│   └── [other optimized assets]
├── _redirects
└── vite.svg
Vite automatically adds content hashes to filenames (e.g., index-abc123.js) to enable efficient browser caching and cache busting.

​
Build Optimization

Vite automatically applies several optimizations:

​
Code Splitting

Vite intelligently splits your code into smaller chunks for faster loading:
  • Vendor dependencies are separated from application code
  • Dynamic imports create separate chunks
  • React Router routes can be lazy-loaded

​
Tree Shaking

Unused code is automatically removed from the final bundle, reducing file size.

​
Asset Optimization

  • Images and fonts are optimized
  • CSS is minified and purged of unused styles
  • JavaScript is minified using esbuild

​
Available Scripts

From package.json: 
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

​
Script Descriptions

ScriptCommandPurpose
devnpm run devStart development server with hot reload
buildnpm run buildCreate production build
lintnpm run lintRun ESLint to check code quality
previewnpm run previewPreview production build locally

​
Build Troubleshooting

If the build fails, check for:
  • ESLint errors (run npm run lint to identify issues)
  • Missing dependencies (run npm install)
  • TypeScript errors if using TypeScript
  • Insufficient memory (try NODE_OPTIONS=--max-old-space-size=4096 npm run build)

​
Common Issues

Out of Memory Errors 
NODE_OPTIONS=--max-old-space-size=4096 npm run build
Dependency Issues 
rm -rf node_modules package-lock.json
npm install
npm run build

​
Build Performance

Typical build times for Tienda ETCA:
  • Initial build: 10-30 seconds
  • Subsequent builds: 5-15 seconds
Build times depend on your hardware, the number of dependencies, and the size of your application.

​
Next Steps

After successfully building your application:
  • Deploy to a hosting platform
  • Set up continuous deployment with Git integration
  • Configure custom domains and SSL certificates

Build docs developers (and LLMs) love

Get started for freeTalk to us