|
1 | | -# Store Launchpad for B2C Next.js Starter |
| 1 | +# Commerce commercetools Extension |
2 | 2 |
|
3 | | -> :information_source: Full documentation can be found [Here](https://docs.commercetools.com/docs/frontend) |
| 3 | +## ⚠️ Important Notice: Repository Migration |
4 | 4 |
|
5 | | -This is a commercetools Launchpad project that uses Next.js |
| 5 | +This repository is **archived**. For the latest updates, improvements, and ongoing development of the B2C components, please visit the official scaffold repository: |
6 | 6 |
|
7 | | -# Getting Started With Frontend: |
| 7 | +**🔗 [Official B2C Scaffold Repository](https://github.com/FrontasticGmbH/scaffold-b2c)** |
8 | 8 |
|
9 | | -## 1- Start the development environment |
| 9 | +## What This Means |
10 | 10 |
|
11 | | -### Running locally in development mode |
| 11 | +- **Current Repository**: Will become read-only (archived) |
| 12 | +- **New Development**: All future updates will be published to the [scaffold-b2c repository](https://github.com/FrontasticGmbH/scaffold-b2b) |
| 13 | +- **Documentation**: Updated documentation and examples will be available in the new location |
12 | 14 |
|
13 | | -``` |
14 | | -yarn install |
15 | | -yarn dev |
16 | | -``` |
| 15 | +## Migration Steps |
17 | 16 |
|
18 | | -### Building and deploying in production |
| 17 | +If you're currently using this B2C components: |
19 | 18 |
|
20 | | -``` |
21 | | -yarn install |
22 | | -yarn build |
23 | | -yarn start |
24 | | -``` |
| 19 | +1. **Bookmark** the new repository: https://github.com/FrontasticGmbH/scaffold-b2c |
| 20 | +2. **Watch** the new repository for updates and releases |
| 21 | +3. **Migrate** your projects to use the latest version from the scaffold repository |
| 22 | +4. **Update** your documentation and team references |
25 | 23 |
|
26 | | -### Running storybook |
| 24 | +--- |
27 | 25 |
|
28 | | -``` |
29 | | -yarn storybook |
30 | | -``` |
31 | | - |
32 | | -### Build a production storybook |
33 | | - |
34 | | -``` |
35 | | -yarn storybook:rebuild |
36 | | -``` |
37 | | - |
38 | | -## 2- Create a basic component |
39 | | - |
40 | | -```javascript |
41 | | -export default function MyComponent(props) { |
42 | | - return <h1>{props.headline}</h1>; |
43 | | -} |
44 | | -``` |
45 | | - |
46 | | -## 3- Create a tastic for your component |
47 | | - |
48 | | -### Under `/packages/frontend/frontastic/tastics/{{MyComponent}}` |
49 | | - |
50 | | -- Create a `schema.json` |
51 | | - |
52 | | -```json |
53 | | -{ |
54 | | - "tasticType": "my-component", |
55 | | - "name": "My Component", |
56 | | - "icon": "favorite", |
57 | | - "category": "Content", |
58 | | - "schema": [ |
59 | | - { |
60 | | - "name": "Basic Options", |
61 | | - "fields": [ |
62 | | - { |
63 | | - "label": "Headline", |
64 | | - "field": "headline", |
65 | | - "type": "string", |
66 | | - "required": true |
67 | | - } |
68 | | - ] |
69 | | - } |
70 | | - ] |
71 | | -} |
72 | | -``` |
73 | | - |
74 | | -- Create an `index.tsx` |
75 | | - |
76 | | -```javascript |
77 | | -export default function MyComponentTastic(props) { |
78 | | - return <MyComponent headline={props.data.headline} />; |
79 | | -} |
80 | | -``` |
81 | | - |
82 | | -You can find more about tastics [Here](https://docs.frontastic.cloud/docs/creating-a-frontastic-component) |
83 | | - |
84 | | -## 4- Register your tastic |
85 | | - |
86 | | -### Under `/packages/frontend/frontastic/tastics/index.tsx` |
87 | | - |
88 | | -```javascript |
89 | | -export const tastics = { |
90 | | - ... |
91 | | - 'my-component': MyComponentTastic |
92 | | -} |
93 | | -``` |
94 | | - |
95 | | -## 5- Finally upload your component to studio |
96 | | - |
97 | | - |
98 | | - |
99 | | - |
100 | | -## That's it.. Now you're all set and can start using your new component in any page you like! |
101 | | - |
102 | | -<br /> |
103 | | -<hr /> |
104 | | -<br /> |
105 | | - |
106 | | -## Linting |
107 | | - |
108 | | -This project uses linting rules that improve the Core Web Vitals of the storefront which are also the recommended rules by Next.js in addition to some other rules for react hooks, typescript, jest, etc... |
109 | | - |
110 | | -If you want more fine-grained configuration, feel free to configure the eslint rules by deactivating and/or extending them in the `.eslintrc.json` in the `frontend` folder. |
111 | | - |
112 | | -To run the linter, just run |
113 | | - |
114 | | -``` |
115 | | -yarn lint |
116 | | -``` |
117 | | - |
118 | | -To fix erros that can be automatically fixed, run |
119 | | - |
120 | | -``` |
121 | | -yarn lint:fix |
122 | | -``` |
123 | | - |
124 | | -We recommend to add linting directly to your code editor or development environment, to get immediate feedback. |
125 | | - |
126 | | -### Linting in vim |
127 | | - |
128 | | -There are a variety of extensions that can add linting support to vim and Neovim. |
129 | | -If you're using vim, we recommend either [ALE](https://github.com/dense-analysis/ale) |
130 | | -or [CoC](https://github.com/neoclide/coc.nvim) and if you use Neovim you can |
131 | | -use the integrated Language Server Protocol to run [eslint_d](https://github.com/mantoni/eslint_d.js/) in the background. |
132 | | -Here's [a handy guide](https://phelipetls.github.io/posts/configuring-eslint-to-work-with-neovim-lsp/) on how to do that |
133 | | - |
134 | | -### Linting in Visual Studio Code |
135 | | - |
136 | | -To integrate ESLint into Visual Studio Code, you will need to install the ESLint extension for Visual Studio Code. Search for ESLint in the Extensions tab and click Install once you have located the extension. |
137 | | -Once ESLint is installed in Visual Studio Code, you’ll notice colorful underlining in your JS/TS files highlighting errors. These markers are color-coded based on severity. If you hover over your underlined code, you will see a message that explains the error to you. |
138 | | - |
139 | | -## Prettier / Code formatting |
140 | | - |
141 | | -Prettier is integrated with the linter so when running `yarn lint:fix` you'll have your code auto formatted as well. |
142 | | - |
143 | | -We also recommend to setup your editor to use prettier to format a document on save. |
| 26 | +**Thank you for your understanding during this transition. We're committed to providing you with the best possible development experience in our new, centralized repository structure.** |
0 commit comments