Deploy Foundation with Vercel

Create a Foundation app and deploy it live with Vercel.

Foundation is a family of responsive front-end frameworks that make it easy 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 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

Initializing a Foundation app with npx and moving into the project directory.

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"

Changing the output directory in the /my-foundation-app/config.yml file.

Step 2: Deploying Your Foundation App with Vercel

To deploy your Foundation app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git Integration of choice:

GitHub

GitLab

Bitbucket

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

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

Was this helpful?

Written By

mcsdev