Custom Shipping Rates

Self-hosted

Custom Shipping Rates

Self-hosted
This template is built with:
This Next.js 14 template demos a simple shipping solution, is fully customizable and sets a foundation for developing self-hosted Wix apps. It takes care of webhooks and OAuth, implements a Wix service plugin and features a pre-built Dashboard Page, designed with the Wix Design System and built with the Wix Dashboard SDK.

Deploy to a free hosting service

Follow these instructions to clone the repository, deploy the server code to a hosting service, and get the app up and running.

Deploy on Vercel

To deploy on Vercel, follow these steps:

Step 1 | Deploy the app's server code

  1. On the template page, click Use Template.

  2. Under Select your hosting service, select Vercel and click Continue.

  3. Click Deploy to Vercel.

    This opens a Vercel deployment page in a new browser window. Keep the original window open, as you'll need it again.

  4. In the Create Git Repository section, under Git Scope, select your GitHub account or other preferred scope.

    If Vercel isn't yet installed on your GitHub account, install and select it as follows:

    a. Under Git Scope select Add GitHub Account.

    b. Click your GitHub account.

    c. Select All repositories, then click Install to install Vercel on your GitHub account.

    d. Now under Git Scope, select your GitHub account.

  5. Under Repository Name, enter a name for the cloned repository on your GitHub account. For example: shipping-rates-app. Click Create.

  6. Wait for Vercel to build and deploy the app.

  7. When deployment is complete, click Continue to Dashboard.

  8. On the Production Deployment page, under Domains, copy and save the app's domain. This is the base URL for your app's server.

Step 2 | Generate a pre-configured App Dashboard app

To generate an app in the App Dashboard and pre-configure it automatically for the template:

  1. Go back to the original quick deployment browser window.

  2. Under Vercel-generated URL (base URL), enter the base URL you saved earlier.

  3. Under App name, enter a name for your app. For example: "Custom Shipping Rates".

  4. Click Create & Continue.

This creates an app for you in the App Dashboard with the required URLs and permissions pre-configured.

Step 3 | Configure environment variables

Once your app is created, a screen appears with a code snippet containing environment variables you need to save in your app code:

  • WIX_APP_ID: Your app's Wix App ID.
  • WIX_APP_SECRET: Your app's secret key.
  • WIX_APP_JWT_KEY: Your app's public key.

Save these environment variables as follows:

  1. Click copy to copy the code snippet to the clipboard.

  2. Go back to the Vercel window and click Settings in the navigation bar.

  3. Click the Key field and paste the code snippet.

    This automatically populates the fields for all the required environment variables.

  4. Click Save.

  5. Click Deployments in the navigation bar to open the Deployments page.

  6. Click the ellipsis next to your deployment, then click Redeploy. In the modal that appears, click Redeploy to redeploy your app server with the new environment variables.

When deployment is finished, your app is ready to install.

Step 4 | Test the app

Follow these steps to create a development site, install your app on the site, and try it out.

  1. In your app's page in the App Dashboard, click Test Your App in the top right, then click Create Development Site.

  2. In the list of business solutions to install on the development site, click Wix Stores, then click Create Site.

  3. Back in your app's page in the App Dashboard, click Test Your App, then click App Market Website.

  4. Click Add to Site.

  5. Click Select next to the development site you just created.

  6. Wix requests the site permissions your app requires. Click Agree & Add to install the app.

Your app is now installed on your development site. To see the app's dashboard page, click Apps in the site dashboard's left sidebar. In the submenu that opens, click the name you chose for your app, such as Custom Shipping Rates.

Deploy on Netlify

To deploy on Netlify, follow these steps:

Step 1 | Deploy the app's server code

  1. On the template page, click Use Template.

  2. Under Select your hosting service, select Netlify and click Continue.

  3. Click Deploy to Netlify.

    This opens a Netlify deployment page in a new browser window. Keep the original window open, as you'll need it again.

  4. In the Netlify page, click Connect to GitHub.

  5. Enter a name for the cloned repository on your GitHub account. For example: shipping-rates-app. Click Save & Deploy.

  6. Wait for Netlify to build and deploy the app.

  7. When the Deploy success modal appears, click Get started.

  8. Under Sites, click on the site you created. This opens the site page.

  9. Copy and save the app's domain. This is the base URL for your app's server.

Step 2 | Generate a pre-configured App Dashboard app

To generate an app in the App Dashboard and pre-configure it automatically for the template:

  1. Go back to the original quick deployment browser window.

  2. Under Netlify custom domain (base URL), enter the base URL you saved earlier.

  3. Under App name, enter a name for your app. For example: "Custom Shipping Rates".

  4. Click Create & Continue.

This creates an app for you in the App Dashboard with the required URLs and permissions pre-configured.

Step 3 | Configure environment variables

Once your app is created, a screen appears with a code snippet containing environment variables you need to save in your app code:

  • WIX_APP_ID: Your app's Wix App ID.
  • WIX_APP_SECRET: Your app's secret key.
  • WIX_APP_JWT_KEY: Your app's public key.

Save these environment variables as follows:

  1. Click copy to copy the code snippet to the clipboard.

  2. Go back to the Netlify window and click Site overview in the left sidebar.

  3. Click Site configuration > Environment variables.

  4. Click Add a variable. In the submenu, click Import from a .env file.

  5. In Contents of .env file paste the code snippet.

  6. Click Import variables.

    This automatically populates the fields for all the required environment variables and saves them.

  7. Click Deploys in the left sidebar.

  8. Click Trigger deploy, then click Deploy site in the dropdown menu to redeploy your app server with the new environment variables.

When deployment is finished, your app is ready to install.

Step 4 | Test the app

Follow these steps to create a development site, install your app on the site, and try it out.

  1. In your app's page in the App Dashboard, click Test Your App in the top right, then click Create Development Site.

  2. In the list of business solutions to install on the development site, click Wix Stores, then click Create Site.

  3. Back in your app's page in the App Dashboard, click Test Your App, then click App Market Website.

  4. Click Add to Site.

  5. Click Select next to the development site you just created.

  6. Wix requests the site permissions your app requires. Click Agree & Add to install the app.

Your app is now installed on your development site. To see the app's dashboard page, click Apps in the site dashboard's left sidebar. In the submenu that opens, click the name you chose for your app, such as Custom Shipping Rates.


How we built this template

Read how this template was built, step by step.

Related templates

Wix CLI

Custom Products Catalog

Add or remove products via a dashboard page using Stores APIs.
Dashboard SDKStores APIWix Design System
Wix CLI

Mixpanel Analytics

Build data-driven apps using an Embedded Script and dashboard page.
Embedded Script APIDashboard SDKWix Design System