From 4128d9a2a852b80ca0ae7ad10e9ca32476776d6d Mon Sep 17 00:00:00 2001 From: moreal Date: Tue, 12 Nov 2024 23:02:33 +0900 Subject: [PATCH] docs: replace Create-React-App with degit --- en/event/for-non-developer.md | 3 ++- en/tutorials/modding/avatar-information-dapp-guide.md | 7 ++++--- en/tutorials/modding/daily-reward-dapp.md | 7 ++++--- ko/event/for-non-developer.md | 3 ++- ko/tutorials/modding/avatar-information-dapp-guide.md | 5 +++-- ko/tutorials/modding/daily-reward-dapp.md | 7 ++++--- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/en/event/for-non-developer.md b/en/event/for-non-developer.md index 20a774c..7ec5dd2 100644 --- a/en/event/for-non-developer.md +++ b/en/event/for-non-developer.md @@ -58,7 +58,7 @@ We’re going to use a popular tool called [React](https://react.dev/) to build In your terminal, run the following command to create a project: ```bash -npx create-react-app your-project-name --template @planetarium/9c-mimir-gql +npx degit planetarium/template-9c-mimir your-project-name ``` Replace `your-project-name` with whatever you want to name your project! This will download a template for your avatar information website. @@ -71,6 +71,7 @@ Once it’s done, open the folder in **VS Code**: Now, run these commands to generate some code and start the project: ```bash +npm install npm run codegen npm run start ``` diff --git a/en/tutorials/modding/avatar-information-dapp-guide.md b/en/tutorials/modding/avatar-information-dapp-guide.md index 254f825..49c7cc8 100644 --- a/en/tutorials/modding/avatar-information-dapp-guide.md +++ b/en/tutorials/modding/avatar-information-dapp-guide.md @@ -7,13 +7,14 @@ This tutorial will show you how to easily fetch avatar information and create a We will use [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/) to quickly create the front end of our project. ```sh -npx create-react-app some-app-name --template @planetarium/9c-mimir-gql +npx degit planetarium/template-9c-mimir some-app-name ``` -First, let's set up a basic project configuration using [Create React App](https://create-react-app.dev/) and run it to make sure everything is working. +First, let's set up a basic project configuration using [degit](https://www.npmjs.com/package/degit) and run it to make sure everything is working. ```sh cd some-app-name +npm install npm run codegen npm run start ``` @@ -22,7 +23,7 @@ Once the initialization is confirmed to be successful, you're ready to proceed! ## Modify the QueryTemplate -Since you downloaded the template using create-react-app, most settings required to use Mimir GQL are already configured. +Since you downloaded the template using degit, most settings required to use Mimir GQL are already configured. If you want to modify the query fetched by GQL, you can edit the `src/graphql/api.graphql` file. To fetch more information related to the avatar, let's modify the query to include the action point as shown below. diff --git a/en/tutorials/modding/daily-reward-dapp.md b/en/tutorials/modding/daily-reward-dapp.md index dfc878f..4ea80fd 100644 --- a/en/tutorials/modding/daily-reward-dapp.md +++ b/en/tutorials/modding/daily-reward-dapp.md @@ -13,12 +13,13 @@ Before starting, please check the [Chrono](../../guide/general/how-to-use-chrono We'll use [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/) to quickly set up the front end of the project. ```sh -npx create-react-app some-app-name --template @planetarium/9c-chrono +npx degit planetarium/template-9c-chrono some-app-name ``` -First, we fetch the basic project settings via [Create React App](https://create-react-app.dev/) and run it. +First, we fetch the basic project settings via [degit](https://www.npmjs.com/package/degit) and run it. ```sh cd some-app-name +npm install npm run codegen npm run start ``` @@ -35,7 +36,7 @@ Afterward, retrieve the playable address, and once the avatar is displayed, you' ## Key Code Explanation -Since we downloaded the template through create-react-app, most of the settings to use Chrono are already in place. +Since we downloaded the template through degit, most of the settings to use Chrono are already in place. ### Loading the SDK diff --git a/ko/event/for-non-developer.md b/ko/event/for-non-developer.md index 1da03ec..efd134b 100644 --- a/ko/event/for-non-developer.md +++ b/ko/event/for-non-developer.md @@ -58,7 +58,7 @@ npm --version 터미널에서 아래 명령어를 입력해 프로젝트를 생성하세요: ```bash -npx create-react-app your-project-name --template @planetarium/9c-mimir-gql +npx degit planetarium/template-9c-mimir your-project-name ``` `your-project-name`은 여러분이 원하는 프로젝트 이름으로 변경하세요! 이 명령어는 저희가 만들어둔 아바타 정보 웹사이트 템플릿을 다운로드합니다. @@ -71,6 +71,7 @@ npx create-react-app your-project-name --template @planetarium/9c-mimir-gql 그다음, 아래 명령어들을 입력해 코드를 생성하고 프로젝트를 시작합니다: ```bash +npm install npm run codegen npm run start ``` diff --git a/ko/tutorials/modding/avatar-information-dapp-guide.md b/ko/tutorials/modding/avatar-information-dapp-guide.md index 1eb83f2..7aa968c 100644 --- a/ko/tutorials/modding/avatar-information-dapp-guide.md +++ b/ko/tutorials/modding/avatar-information-dapp-guide.md @@ -5,12 +5,13 @@ 프로젝트는 빠르게 프론트를 만들어볼 수 있는 [React](https://react.dev/)와 [TypeScript](https://www.typescriptlang.org/)를 사용합니다. ```sh -npx create-react-app some-app-name --template @planetarium/9c-mimir-gql +npx degit planetarium/template-9c-mimir some-app-name ``` -먼저 [Create React APP](https://create-react-app.dev/)을 통해 기본적인 프로젝트 설정들을 받아온 후 실행해봅니다. +먼저 [degit](https://www.npmjs.com/package/degit)을 통해 기본적인 프로젝트 설정들을 받아온 후 실행해봅니다. ```sh cd some-app-name +npm install npm run codegen npm run start ``` diff --git a/ko/tutorials/modding/daily-reward-dapp.md b/ko/tutorials/modding/daily-reward-dapp.md index d7fa29e..4d887e1 100644 --- a/ko/tutorials/modding/daily-reward-dapp.md +++ b/ko/tutorials/modding/daily-reward-dapp.md @@ -12,12 +12,13 @@ 프로젝트는 빠르게 프론트를 만들어볼 수 있는 [React](https://react.dev/)와 [TypeScript](https://www.typescriptlang.org/)를 사용합니다. ```sh -npx create-react-app some-app-name --template @planetarium/9c-chrono +npx degit planetarium/template-9c-chrono some-app-name ``` -먼저 [Create React APP](https://create-react-app.dev/)을 통해 기본적인 프로젝트 설정들을 받아온 후 실행해봅니다. +먼저 [degit](https://www.npmjs.com/package/degit)을 통해 기본적인 프로젝트 설정들을 받아온 후 실행해봅니다. ```sh cd some-app-name +npm install npm run codegen npm run start ``` @@ -33,7 +34,7 @@ ReFill 버튼을 눌러 서명을 하고 실제로 Daily Reward를 받아볼 수 ![alt text](/images/modding/guide/daily-reward-dapp/refill-buttons.png) ## 주요 코드 설명 -create-react-app을 통해 템플릿을 다운받았기 때문에 Chrono를 사용하기 위한 대부분의 세팅이 되어있는 상태입니다. +degit을 통해 템플릿을 다운받았기 때문에 Chrono를 사용하기 위한 대부분의 세팅이 되어있는 상태입니다. ### SDK 불러오기 ```ts