-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: wip docs app for composable frontend
- Loading branch information
Showing
31 changed files
with
12,033 additions
and
3,317 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
module.exports = { | ||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
107
apps/composable-cli-docs/docs/composable-cli/commands.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
81
apps/composable-cli-docs/docs/composable-cli/installation.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
``` |
8 changes: 8 additions & 0 deletions
8
apps/composable-cli-docs/docs/composable-starter/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
Oops, something went wrong.