Integrating an existing App into YouCan Partners ​

This guide is designed for developers who wish to integrate or collaboratively work on an existing application built using the YouCan Nuxt starter template, which includes all necessary presets and configurations that simplify the development process.

Requirements ​

• Ensure you have an active Partner account
• Set up a development store
• Install YouCan CLI
• Have NodeJs, a package manager (either npm or pnpm), and git installed.

Integration Steps ​

Clone the existing Project ​

Clone the repository of the existing YouCan app to your local environment:

git clone <repository-url>

Install Dependencies ​

Navigate into your project directory and install dependencies:

cd <project-name>
pnpm install

App Configuration ​

Ensure that your youcan.app.json file exists in the root directory, if not, set it up with your app name:

//youcan.app.json
{
  "name": "YourAppName"
}

Start Development Server ​

Run the following command to start a local server for your app:

pnpm dev

Configure Environment and App Settings​ ​

To ensure your app can authenticate with the YouCan platform, you'll need to configure OAuth credentials and URL:

• In your project repository, create a .env file ;
• Navigate to the YouCan Partner Dashboard > locate your app > and copy the OAuth credentials ;
• Update your .env file with these credentials accordingly:

NUXT_YOUCAN_API_KEY=<your-client-id>
NUXT_YOUCAN_API_SECRET=<your-client-secret>
NUXT_YOUCAN_API_REDIRECT=http://localhost:3000/auth/callback
NUXT_YOUCAN_WEBHOOK_URL=http://localhost:3000/youcan/webhook
DATABASE_URL="file:./dev.db"
YOUCAN_BASE_URL= https://api.youcan.shop

• Update the youcan.app.json file by adding:
  • the app_url to match the port where your app runs ;
  • the redirect_urls for OAuth callbacks, which should include /auth/callback path.

//youcan.app.json
{
  "name": "<your-app-name>",
  "id": "<your-app-id>",
  "app_url": "http://localhost:3000",
  "redirect_urls": [
      "http://localhost:3000/auth/callback"
  ],
  "oauth": {
    "scopes": [
      "*"
    ],
  }
}

lsof -ti:3000 | xargs kill

Install the App on Your Development Store ​

Run the following command to ensure you are logged into your YouCan account:

youcan auth login

To preview your app, install it on your development store using the following command. This will prompt you to authorize the CLI to access your development store:

pnpm youcan app install

Once you have authorized access, you will find the app in your Draft Apps within the Seller Area Portal.