---
title: Deploy Foundation with Vercel
description: Create a Foundation app and deploy it live with Vercel.
url: /kb/guide/deploying-foundation-with-vercel
canonical_url: "https://vercel.com/kb/guide/deploying-foundation-with-vercel"
last_updated: 2025-11-10
authors: Matthew Sweeney
related:
  - /docs/concepts/deployments/git
  - /docs/concepts/deployments/preview-deployments
  - /docs/concepts/deployments/environments
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

[Foundation](https://foundation.zurb.com/) is a family of responsive front-end frameworks that enable you to design beautiful responsive websites, apps and emails that look amazing on any device.

## Step 1: Set Up Your Foundation Project

Set up a Foundation app with [`npx`](https://www.npmjs.com/package/npx) and move into the project directory, choosing the option **A web app** and providing a project name of `my-foundation-app`:

`npx foundation new && cd my-foundation-app`

In the `./my-foundation-app/config.yml` file, under the `PATHS` object, change the output directory for the project to `public`:

`PATHS: - "dist": "dist" + "dist": "public"`

## Step 2: Deploying Your Foundation App with Vercel

To deploy your Foundation app with [Vercel for Git](https://vercel.com/docs/concepts/deployments/git), make sure it has been pushed to a Git repository.

Import the project into Vercel using your [Git provider](https://vercel.com/import/git) of choice.

After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments#), and all changes made to the [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).

Once deployed, you will get a URL to see your app live, such as the following: [https://foundation.now-examples.vercel.app](https://foundation.now-examples.vercel.app/)