Getting Started Guide for Building Apps on YouCan ​

This guide will help you get started with building and deploying an embedded app on the YouCan platform. You'll set up your development environment, create a basic app using YouCan CLI's starter template, and install the app on your development store.

Requirements ​

To begin, ensure you have the following:

• An active Partner account.
• Your development store set up.
• YouCan CLI installed.
• NodeJs, a package manager (either npm or pnpm), and git installed.
• A Code Editor for managing the codebase.

Initial Setup ​

Use the following command to create a new YouCan app:

pnpm create @youcan/app@latest

Or if you prefer npm:

npm init @youcan/app@latest

After initialization, you'll be prompted to name your app and select the app template to get started with.

We recommend using the Nuxt template as it provides all required setups, for a fast development process.

Set Up the Application ​

Navigate to your project directory:

cd <your-app-name>

Install Dependencies: ​

pnpm install

Start the Development Server ​

Run the following command to start your development server:

pnpm dev

The YouCan CLI will prompt you for authentication if you haven't logged in to your development store.

youcan auth login

Authentication and Environment Configuration ​

• In your project repository, create a .env file by duplicating the .env.example template ;
• Navigate to the YouCan Partner Dashboard > locate your newly created app > and copy the OAuth credentials ( Client ID and Client Secret) ;
• Update your .env file with the necessary keys.

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 your app_url and redirect_urls.

//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": [
      "*"
    ],
  }
}

Developing Locally ​

With the development server running and your environment configured, you can now build and test your app locally. YouCan CLI simplifies the OAuth flow, and you can further customize the authentication setup as needed.

Install the App on Your Development Store ​

To see your app in action, you need to install it on your development store by running the following command:

pnpm youcan app install

Next Steps ​

To delve deeper into building advanced features such as integrating webhooks and sending SMS notifications, refer to the detailed guide: Build an App Using Nuxt.