Deployment Guide

Deploy your VENCOL Front Template to Vercel, Netlify, or other hosting platforms

This guide covers deploying your React + TypeScript frontend application to production.

Overview

The VENCOL Front Template is built with Vite and can be deployed to any static hosting platform. This guide focuses on Vercel and Netlify, the two most popular options.

Project Configuration

Your project includes build configuration in package.json:

package.json

{
  "name": "vencol---frescura-visible",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Deploying to Vercel

Vercel is the recommended platform for deploying Vite applications. The project includes vercel.json configuration.

Vercel Configuration

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

This configuration ensures all routes are handled by the React Router in your SPA.

Deploy via Vercel CLI

1. Install Vercel CLI

   npm install -g vercel
   
2. Login to Vercel

   vercel login
   
3. Deploy

   vercel
   

   Follow the prompts to configure your project

4. Deploy to production

   vercel --prod
   

Deploy via Vercel Dashboard

1. Push to Git

   Push your code to GitHub, GitLab, or Bitbucket

2. Import to Vercel

   Go to vercel.com/new and import your repository

3. Configure build settings

   • Framework Preset: Vite
   • Build Command: vite build
   • Output Directory: dist
   • Install Command: npm install
4. Add environment variables

   If using WordPress integration:

   VITE_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2
   
5. Deploy

   Click “Deploy” and wait for the build to complete

Vercel will automatically deploy new commits from your main branch. Preview deployments are created for pull requests.

Deploying to Netlify

Netlify is another excellent option for deploying static sites.

Netlify Configuration

Create netlify.toml in your project root:

netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Deploy via Netlify CLI

1. Install Netlify CLI

   npm install -g netlify-cli
   
2. Login to Netlify

   netlify login
   
3. Initialize your site

   netlify init
   
4. Deploy

   netlify deploy --prod
   

Deploy via Netlify Dashboard

1. Push to Git

   Push your code to GitHub, GitLab, or Bitbucket

2. Import to Netlify

   Go to app.netlify.com and click “Add new site”

3. Configure build settings

   • Build command: npm run build
   • Publish directory: dist
   • Base directory: (leave empty)
4. Add environment variables

   In Site settings → Build & deploy → Environment:

   VITE_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2
   
5. Deploy

   Click “Deploy site”

Building Locally

Test your production build locally before deploying:

# Build the application
npm run build

# Preview the production build
npm run preview

The build output will be in the dist directory.

Environment Variables

Vite uses environment variables prefixed with VITE_.

Local Development

Create .env in your project root:

.env

VITE_WORDPRESS_API_URL=https://cms.gobigagency.co/vencol/wp-json/wp/v2
VITE_GEMINI_API_KEY=your-api-key-here

Never commit .env files to Git. Add .env to your .gitignore file.

Production Variables

Vercel

# In Vercel Dashboard: Settings → Environment Variables
VITE_WORDPRESS_API_URL=https://cms.gobigagency.co/vencol/wp-json/wp/v2
VITE_GEMINI_API_KEY=your-production-key

Accessing Environment Variables

In your code:

const apiUrl = import.meta.env.VITE_WORDPRESS_API_URL;
const apiKey = import.meta.env.VITE_GEMINI_API_KEY;

Custom Domain Setup

Vercel Custom Domain

1. Open project settings

   Go to your project in Vercel Dashboard → Settings → Domains

2. Add domain

   Enter your custom domain (e.g., www.vencol.com)

3. Configure DNS

   Add the following DNS records at your domain registrar:

   Option A: Using A record

   A     @     76.76.21.21
   

   Option B: Using CNAME

   CNAME www   cname.vercel-dns.com
   
4. Wait for DNS propagation

   SSL certificate will be automatically issued (may take a few minutes)

Netlify Custom Domain

1. Open domain settings

   Site settings → Domain management → Add custom domain

2. Add domain

   Enter your custom domain

3. Configure DNS

   Point your domain to Netlify:

   A     @     75.2.60.5
   CNAME www   your-site-name.netlify.app
   
4. Enable HTTPS

   Netlify will automatically provision an SSL certificate

Performance Optimization

1. Enable Build Caching

Both Vercel and Netlify cache node_modules automatically.

2. Image Optimization

Use a CDN for images. Services like Cloudinary, Imgix, or WordPress media library with CDN integration are recommended.

3. Code Splitting

Vite automatically splits code by routes. To optimize further:

App.tsx

import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

<Suspense fallback={<div>Loading...</div>}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/nosotros" element={<About />} />
  </Routes>
</Suspense>

4. Bundle Analysis

Analyze your bundle size:

npm install -D rollup-plugin-visualizer

Update vite.config.ts:

vite.config.ts

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true })
  ]
});

Run npm run build to generate a bundle analysis.

Continuous Deployment

Both Vercel and Netlify support automatic deployments:

Git Workflow

1. Push to branch

   git checkout -b feature/new-solution
   git add .
   git commit -m "Add new biodegradable packaging solution"
   git push origin feature/new-solution
   
2. Preview deployment created

   Both platforms create a preview URL for your branch

3. Merge to main

   git checkout main
   git merge feature/new-solution
   git push origin main
   
4. Production deployment

   Automatically deployed to your production domain

Monitoring & Analytics

Vercel Analytics

Enable analytics in your Vercel dashboard:

1. Project Settings → Analytics
2. Enable Web Analytics
3. No code changes required

Google Analytics

Add Google Analytics to index.html:

index.html

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Troubleshooting

Build Fails on Deployment

1. Check build logs in your hosting platform dashboard
2. Test locally: Run npm run build to replicate the error
3. Check Node version: Ensure your hosting platform uses Node 18+
4. Clear cache: Force a clean build without cache

Routes Return 404

Problem: Direct navigation to /nosotros returns 404

Solution: Ensure your vercel.json or netlify.toml includes SPA redirects

Environment Variables Not Working

1. Check prefix: Must start with VITE_
2. Rebuild: Environment variables require a new build
3. Check scope: Ensure variables are set for production environment

Images Not Loading

1. Check CORS: Ensure image CDN allows your domain
2. Check URLs: Use absolute URLs, not relative paths
3. Check HTTPS: Mixed content (HTTP images on HTTPS site) may be blocked

Deployment Checklist

1. Update site metadata

   Update siteUrl in data/data.tsx with your production domain

2. Configure WordPress URL

   Set VITE_WORDPRESS_API_URL environment variable

3. Test production build

   Run npm run build && npm run preview locally

4. Check responsive design

   Test on mobile, tablet, and desktop

5. Verify all routes work

   Test navigation to all pages

6. Set up custom domain

   Configure DNS and wait for SSL certificate

7. Enable analytics

   Set up Google Analytics or platform analytics

8. Test contact form

   Ensure form submissions work (if implemented)

Next Steps

After deployment:

• Monitor performance with Lighthouse
• Set up uptime monitoring (e.g., UptimeRobot)
• Configure Google Search Console
• Submit sitemap to search engines
• Set up email notifications for build failures

Additional Resources

• Vite Production Build Guide
• Vercel Documentation
• Netlify Documentation
• React Router Documentation