Deployment Guide - VENCOL Front Template

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

Install Vercel CLI

npm install -g vercel

vercel login

Deploy

vercel

Follow the prompts to configure your project

Deploy to production

vercel --prod

Deploy via Vercel Dashboard

Push to Git

Push your code to GitHub, GitLab, or Bitbucket

Import to Vercel

Go to vercel.com/new and import your repository

Configure build settings

Framework Preset: Vite
Build Command: vite build
Output Directory: dist
Install Command: npm install

Add environment variables

If using WordPress integration:

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

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

Install Netlify CLI

npm install -g netlify-cli

netlify login

Initialize your site

netlify init

Deploy

netlify deploy --prod

Deploy via Netlify Dashboard

Push to Git

Push your code to GitHub, GitLab, or Bitbucket

Import to Netlify

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

Configure build settings

Build command: npm run build
Publish directory: dist
Base directory: (leave empty)

Add environment variables

In Site settings → Build & deploy → Environment:

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

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

# 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

Open project settings

Go to your project in Vercel Dashboard → Settings → Domains

Add domain

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

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

Wait for DNS propagation

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

Netlify Custom Domain

Open domain settings

Site settings → Domain management → Add custom domain

Add domain

Enter your custom domain

Configure DNS

Point your domain to Netlify:

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

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

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

Preview deployment created

Both platforms create a preview URL for your branch

Merge to main

git checkout main
git merge feature/new-solution
git push origin main

Production deployment

Automatically deployed to your production domain

Monitoring & Analytics

Vercel Analytics

Enable analytics in your Vercel dashboard:

Project Settings → Analytics
Enable Web Analytics
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

Check build logs in your hosting platform dashboard
Test locally: Run npm run build to replicate the error
Check Node version: Ensure your hosting platform uses Node 18+
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

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

Images Not Loading

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

Deployment Checklist

Update site metadata

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

Configure WordPress URL

Set VITE_WORDPRESS_API_URL environment variable

Test production build

Run npm run build && npm run preview locally

Check responsive design

Test on mobile, tablet, and desktop

Verify all routes work

Test navigation to all pages

Set up custom domain

Configure DNS and wait for SSL certificate

Enable analytics

Set up Google Analytics or platform analytics

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

Get Started

Core Concepts

Components

Pages

Guides

​Overview

​Project Configuration

​Deploying to Vercel

​Vercel Configuration

​Deploy via Vercel CLI

​Deploy via Vercel Dashboard

​Deploying to Netlify

​Netlify Configuration

​Deploy via Netlify CLI

​Deploy via Netlify Dashboard

​Building Locally

​Environment Variables

​Local Development

​Production Variables

​Accessing Environment Variables

​Custom Domain Setup

​Vercel Custom Domain

​Netlify Custom Domain

​Performance Optimization

​1. Enable Build Caching

​2. Image Optimization

​3. Code Splitting

​4. Bundle Analysis

​Continuous Deployment

​Git Workflow

​Monitoring & Analytics

​Vercel Analytics

​Google Analytics

​Troubleshooting

​Build Fails on Deployment

​Routes Return 404

​Environment Variables Not Working

​Images Not Loading

​Deployment Checklist

​Next Steps

​Additional Resources

Build docs developers (and LLMs) love

Overview

Project Configuration

Deploying to Vercel

Vercel Configuration

Deploy via Vercel CLI

Deploy via Vercel Dashboard

Deploying to Netlify

Netlify Configuration

Deploy via Netlify CLI

Deploy via Netlify Dashboard

Building Locally

Environment Variables

Local Development

Production Variables

Accessing Environment Variables

Custom Domain Setup

Vercel Custom Domain

Netlify Custom Domain

Performance Optimization

1. Enable Build Caching

2. Image Optimization

3. Code Splitting

4. Bundle Analysis

Continuous Deployment

Git Workflow

Monitoring & Analytics

Vercel Analytics

Google Analytics

Troubleshooting

Build Fails on Deployment

Routes Return 404

Environment Variables Not Working

Images Not Loading

Deployment Checklist

Next Steps

Additional Resources