If you don't want to use the deployment option via Vercel, you can also run Composable UI locally. Below are the steps on how to do this.
Ensure that you have installed the following on the local development machine:
-
Node.js v18.14.0 or higher. For checking the current version of Node.js on your machine, run the following command:
node -v
For changing the Node.js version, follow the instructions in the nvm documentation.
-
pnpm v8.0 or higher. For checking the current version of pnpm on your machine, run the following command:
pnpm --version
For installing pnpm, run the following command:
npm install -g pnpm
If you currently have a version prior to 8.0, run the following command:
npm uninstall pnpm -g npm install -g pnpm
-
A code editor, such as Visual Studio Code.
1. Clone the source repository to your local development environment.
git clone https://github.com/voucherifyio/composable-ui-onboarding
Below are the steps:
- Sign up for a free Algolia account here: https://www.algolia.com/ and log into your account.
- On the Get Started page, create your first index with a desired name.
- Retrieve your Algolia API keys by following these steps:
- Go to Settings > Team and Access > API Keys and make a note of the following values:
- Application ID (
NEXT_PUBLIC_ALGOLIA_APP_ID
) - Search API Key (
NEXT_PUBLIC_ALGOLIA_API_SEARCH_KEY
) - Admin API Key (
ALGOLIA_API_ADMIN_KEY
)
- Application ID (
- It should contain following environment variables:
NEXT_PUBLIC_ALGOLIA_APP_ID=
ALGOLIA_API_ADMIN_KEY=
NEXT_PUBLIC_ALGOLIA_INDEX_NAME=products
VOUCHERIFY_API_URL=
VOUCHERIFY_APPLICATION_ID=
VOUCHERIFY_SECRET_KEY=
NEXT_PUBLIC_ALGOLIA_APP_ID
will be the obtainedApplication ID
, andALGOLIA_API_ADMIN_KEY
will be the obtainedAdmin API Key
.
- Go to
Project Settings
in the Voucherify dashboard-
Click on your name in the upper right corner.
-
From the list, select
Project Settings
. -
Find the section with
Application Keys
. -
Copy or make a note of the
Application ID
andSecret Key
. -
Make a note of your API endpoint.
| Shared Cluster | Endpoint | |------------------|---------------------------------| | Europe (default) |
https://api.voucherify.io
| | United States |https://us1.api.voucherify.io
| | Asia (Singapore) |https://as1.api.voucherify.io
|
-
They will make it possible to populate Algolia and Voucherify with the relevant product data.
pnpm i
pnpm run algolia-setup
pnpm run voucherify-preconfigure
- Below are the variables that need to be completed for the application to work properly:
NEXT_PUBLIC_ALGOLIA_APP_ID=
NEXT_PUBLIC_ALGOLIA_API_SEARCH_KEY=
NEXT_PUBLIC_ALGOLIA_INDEX_NAME=products
VOUCHERIFY_API_URL=
VOUCHERIFY_APPLICATION_ID=
VOUCHERIFY_SECRET_KEY=
You already have all the values you need to complete these variables, so just fill them in again.
After running the scripts and completing the environment variables, you should be able to run the pnpm dev
command from the root directory, the application will be available at localhost:3000
by default.
If you encounter problems, such as the lack of Algolia configuration, or the lack of authorization of Voucherify keys, please make sure twice that all environment variables are correct. Pay special attention to the correctness of your Voucherify API endpoint.
Most often it also helps to re-run the scripts pnpm run algolia-setup
and pnpm run voucherify-preconfigure
.
If there is still a problem with the operation of the application, please contact us.