Skip to content

Commit

Permalink
feat: wip docs app for composable frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
field123 committed Nov 27, 2023
1 parent 4a77144 commit 075262a
Show file tree
Hide file tree
Showing 31 changed files with 12,033 additions and 3,317 deletions.
20 changes: 20 additions & 0 deletions apps/composable-cli-docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Dependencies
/node_modules

# Production
/build

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
41 changes: 41 additions & 0 deletions apps/composable-cli-docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Website

This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.

### Installation

```
$ yarn
```

### Local Development

```
$ yarn start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

```
$ yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.

### Deployment

Using SSH:

```
$ USE_SSH=true yarn deploy
```

Not using SSH:

```
$ GIT_USER=<Your GitHub username> yarn deploy
```

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
3 changes: 3 additions & 0 deletions apps/composable-cli-docs/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
95 changes: 95 additions & 0 deletions apps/composable-cli-docs/docs/build-a-storefront.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
sidebar_position: 4
title: Build a Storefront
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Build Your own Elastic Path powered Storefront

This document will guide you through the process of building your own Elastic Path powered storefront using Elastic Path Commerce services.


## Overview

While we provide a Next.js powered storefront through our Composable CLI, you may want to build your own storefront to meet your specific needs. This guide will walk you through the process of building your own storefront using Elastic Path Commerce, regardless of what tools you are using.

### Connect to Elastic Path Commerce

There are multiple way of connecting to the Elastic Path Commerce service. You have options depending on which tools and libraries you use.

- For React-based storefronts: you can use our [React Shopper Hooks](https://www.npmjs.com/package/@elasticpath/react-shopper-hooks). It provides you with the necessary React hooks and utilities to retrieve and manipulate data in the Elastic Path services.
- For JavaScript frameworks: you can use our [JavaScript SDK](https://www.npmjs.com/package/@moltin/sdk). It provides you with the necessary JavaScript functions to interact with Elastic Path services.
- For other frontend technologies: you can interact directly with Elastic Path services through their REST APIs.

## Creating an Application Key

Application keys are used to directly manage access to Organizations and stores. These keys are identified based on their names, and are not associated with a user.

You can use application keys to generate client_credentials and implicit tokens. To learn more about client_credentials and implicit tokens, see [Security](https://elasticpath.dev/docs/commerce-cloud/authentication/security).

There are two ways to create an application key:

1. Using the Elastic Path Commerce Manager
2. Using the Elastic Path API

### Using the Elastic Path Commerce Manager

In a Commerce store, all organization and store admins can create, view, and manage the list of keys in a store.

1. In Commerce Manager, go to SYSTEM > Application Keys.
2. Go to the **Application Keys** tab.
3. Click Create new.
4. In the **Name** field, enter the name of the key that you want.
5. Click **Create**

:::tip My tip

Make sure to copy your Client Secret key and save it somewhere secure because your Client Secret key will be not be displayed to you again.

:::

### Using the Elastic Path API

To create an application key using the Elastic Path API use the `/v2/application-keys` endpoint either through the sdk or directly through the API.

<Tabs>
<TabItem value="sdk" label="Javascript SDK">

```typescript
client.ApplicationKeys.Create({
type: "application_key",
name: 'test',
})
```

</TabItem>

<TabItem value="fetch" label="Fetch API">

```js
fetch("https://useast.api.elasticpath.com/v2/application-keys", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer XXXX"
}
body: JSON.stringify({
data: {
type: "application_key",
name: "Test keys"
}
})
}).then(response => response.json())
.then(data => console.log(data));
```


</TabItem>
</Tabs>

After creating the application key you can use the client_id to create the `implicit` access token you need. The JS SDK will do this for you automatically, but if you are using the API directly you will need to call the [authentication endpoint](https://elasticpath.dev/docs/commerce-cloud/authentication/Tokens/implicit-token) to get the token.

### Using the key in storefront

8 changes: 8 additions & 0 deletions apps/composable-cli-docs/docs/composable-cli/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "Composable CLI",
"position": 2,
"link": {
"type": "generated-index",
"description": "Composable starter storefront powered by Elastic Path"
}
}
107 changes: 107 additions & 0 deletions apps/composable-cli-docs/docs/composable-cli/commands.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
sidebar_position: 2
title: Commands
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Composable CLI commands for storefront development

This reference lists the commands that you can use to build storefronts with Composable CLI.

## Command Overview

Composable CLI accelerates your time to market by providing the following features:

- Create new Next.js storefronts
- Easy setup and configuration of Elastic Path Products and Integrations

---

## Command Syntax

If you've installed Composable CLI globally you can run all commands using your package manager:


<Tabs>
<TabItem value="alias" label="Alais">

```bash
ep [COMMAND] --[FLAG]
```

</TabItem>

<TabItem value="standard" label="Standard">

```bash
composable-cli [COMMAND] --[FLAG]
```

</TabItem>
</Tabs>

---

## Command reference

| Command | Alais | Description |
| :---------------- | :------: | ----: |
| login | | Login to the Composable CLI |
| logout | | Logout of the Composable CLI |
| generate | g | generate Elasticpath storefront |
| integration | int | setup Elastic Path integrations for your storefront |
| payments | p | setup Elastic Path payment gateways for your storefront |
| config | | interact with stored configuration |
| store | | interact with Elasticpath store |
| feedback | | Feedback to the Composable CLI |
| insights | | opt in/out product insights |

---

## login

Authenticate to the Composable CLI

```bash
ep login
```

### Flags

| Flag | Description |
| :---------------- | :------: |
| --region, -r | Region of Elastic Path account |

---

## logout

Logout of the Composable CLI

```bash
ep logout
```

---

## generate

Generate a new Elastic Path storefront

```bash
ep generate [template] [project-name]
```

### Flags

| Flag | Description |
| :---------------- | :------: |
| --template, -t | The template to use for the new project. Defaults to `nextjs` |
| --project-name, -p | The name of the new project. Defaults to `ep-storefront` |
| --help, -h | Show help for the generate command |

---

TODO: Work in progress more coming soon
81 changes: 81 additions & 0 deletions apps/composable-cli-docs/docs/composable-cli/installation.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
sidebar_position: 1
title: Installation and Setup
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Composable CLI for frontend experiences

The Composable CLI is a command line tool designed to make it easy for you to build Elastic Path-powered frontend experiences. It also enables you to configure various products and integrations provided by Elastic Path.

You need to use Node.js to install Composable CLI and manage its dependencies.

This documentation explains how to use Composable CLI for developing storefronts.

## Features

Composable CLI accelerates your time to market by providing the following features:

- Create new Next.js storefronts
- Easy setup and configuration of Elastic Path Products and Integrations

## Prerequisites

- Node.js v18.17+
- You've installed a Node.js package manager: either [npm](https://www.npmjs.com/get-npm), [Yarn 1.x](https://classic.yarnpkg.com/lang/en/docs/install), or [pnpm](https://pnpm.io/installation).
- You've installed [Git](https://git-scm.com/)

## Installation

Composable CLI is available as an npm package: [composable-cli](https://www.npmjs.com/package/composable-cli).

In your terminal, run the following command to install Composable CLI:

<Tabs>
<TabItem value="pnpm" label="pnpm">

```bash
pnpm add -g @composable/cli
```

</TabItem>

<TabItem value="npm" label="npm">

```bash
npm install -g @composable/cli
```

</TabItem>
<TabItem value="yarn" label="yarn">

```bash
yarn global add @composable/cli
```

</TabItem>
</Tabs>

You can verify that Composable CLI is installed correctly by running the following command:

```bash
ep --version
```

Composable CLI can execute commands using either it primary command `composable-cli` or its alias `ep`.

## Authentication

To use Composable CLI, you need to authenticate with Elastic Path. You can do this by running the following command:

```bash
ep login
```

This command will prompt you for your username and password. After you authenticate, Composable CLI will keep you sign in. If you wish to sign out, you can run the following command:

```bash
ep logout
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "Composable Starter",
"position": 3,
"link": {
"type": "generated-index",
"description": "Composable starter storefront powered by Elastic Path"
}
}
Loading

0 comments on commit 075262a

Please sign in to comment.