Deployment #

When it comes to deploying your plugin there are several platforms to choose from. Each platform has its unique features and benefits, so the choice depends on you.

In this guide you will found some options for static sites that have free plans.

3.1. Building your project #

The building may vary between frameworks but if you had previously configured your scripts in package.json, npm run build should work.

The resulting build should be located somewhere in the dist/ folder, maybe somewhere else if you have configured so.

Be wary that some framework's builders can add additional folders like apps/project-name/, project-name/ or browser/.

Examples:

Vue dist example Angular dist example

3.2. Netlify #

Create an account #

You need a Netlify account if you don't already have one. You can sign up with Github, GItlab, BItbucket or via email and password.

CORS issues #

To avoid these issues you can add a _headers file to your plugin. Place it in the public/ folder or alongside the main files.

/*
  Access-Control-Allow-Origin: *

Connect to Git #

Netlify allows you to import an existing project from GitHub, GitLab, Bitbucket or Azure DevOps.

How to deploy #

  1. Go to Start and connect with your repository. Allow Netlify to be installed in either all your projects or just the selected ones.

Netlify git installation

  1. Configure your build settings. Netlify auto-detects your framework and offers a basic configuration. This is usually enough.

Netlify git configuration

  1. Deploy your plugin.

Drag and drop #

Netlify offers a simple drag and drop method. Check Netlify Drop.

How to deploy #

  1. Build your project
npm run build

  1. Go to Netlify Drop.

  2. Drag and drop the build folder into Netlify Sites. Dropping the whole dist may not work, you should drop the folder where the main files are located.

  3. Done!

3.3. Cloudflare #

Create an account #

You need a Cloudflare account if you don't already have one. You can sign up via email and password.

CORS issues #

To avoid these issues you can add a _headers file to your plugin. Place it in the public/ folder or alongside the main files.

/*
  Access-Control-Allow-Origin: *

Connect to Git #

Cloudflare allows you to import an existing project from GitHub or GitLab.

How to deploy #

  1. Go to Workers & Pages > Create > Page > Connect to git

  2. Select a repository. Allow Cloudflare to be installed in either all your projects or just the selected ones.

Cloudflare git installation

  1. Configure your build settings.

Cloudflare git configuration

  1. Save and deploy.

Direct upload #

You can directly upload your plugin folder.

How to deploy #

  1. Build your plugin.
npm run build

  1. Go to Workers & Pages > Create > Page > Upload assets.

  2. Create a new page.

Cloudflare new page

  1. Upload your plugin files. You can drag and drop or select the folder.

Cloudflare page upload files

  1. Deploy site.

3.4. Surge #

Surge provides a CLI tool for easy deployment.

CORS issues #

To avoid these issues you can add a CORS file to your plugin. Place it in the public/ folder or alongside the main files.

The CORS can contain a * for any domain, or a list of specific domains.

Check Enabling Cross-Origin Resources sharing.

How to deploy #

  1. Install surge CLI globally and log into your account or create one.
npm install --global surge
surge login
# or
surge signup
  1. Create a CORS file to allow all sites.
echo '*' > public/CORS
  1. Build your project.
npm run build
  1. Start surge deployment
surge

# Your plugin build folder
project: /home/user/example-plugin/dist/

# your domain, surge offers a free .surge.sh domain and free ssl
domain: https://example-plugin-penpot.surge.sh

upload: [====================] 100% eta: 0.0s (10 files, 305761 bytes)
CDN: [====================] 100%
encryption: *.surge.sh, surge.sh (346 days)
IP: XXX.XXX.XXX.XXX

Success! - Published to example-plugin-penpot.surge.sh
  1. Done!