칸타라💙 - 몇 분 안에 서버 없는 Fullstack React 응용 프로그램을 만드는 데 사용되는 CLI 도구

오늘 나는 내가 최근에 하고 있는 프로젝트의 발표를 기쁘게 발표했다.
💥 Cantara 💥
TypeScript를 사용하여 Fullstack React 어플리케이션을 생성하는 CLI 도구

Website • GitHub • Chat on Spectrum

❓ 뭐 공부 해요?

Cantara 대표:
노드, TypeScript 및 React 응용 프로그램을 생성합니다.
이 도구는 다음과 같은 제로 구성 도구입니다.

React 어플리케이션 개발(1개 이상)

...하나 이상의 서버 노드 및/또는 노드가 없습니다.js API

...단일 저장소에서 구성

...스택의 모든 레이어에서 TypeScript 사용

또한 레이어 간에 코드를 쉽게 공유하거나 외부 소비자에게 코드를 패키지로 공유할 수 있으며 이 패키지는 내부에서 사용할 수도 있고 NPM을 사용하여 외부에서 사용할 수도 있다.
Cantara는 단일 저장소 코드 라이브러리 응용 프로그램 개발 라이프 사이클의 모든 측면을 포괄하기 위해 설계되었습니다.

개발

테스트

구축/배포/발표

지속적인 통합

...다음으로 추정

그것 또한 Fullstack 응용 프로그램에 사용되는createreact 응용 프로그램으로 설명될 수 있습니다.
따라서 본질적으로 Fullstack TypeScript 응용 프로그램 개발을 쉽게 하는 도구입니다.
✨더 적은 설정, 더 많은 인코딩.✨

⚡ 특징

클라이언트가 보여주는 React 응용 프로그램 개발(create React 응용 프로그램을 사용할 수 있는 것처럼)

서버 없는 API 개발 및 배포

개발 노드.js 애플리케이션(예: express 기반 REST API)

React 구성 요소/JS 패키지를 개발하여 응용 프로그램에서 사용하고 NPM에 발표

쓰기 유닛/통합/e2e 테스트

❔ 무엇 때문에

저는 현재 전문적으로 종사한 대부분의 프로젝트와 단독 개발자든 팀이든 모두 대형 단일 저장소 형식으로 구축된 것입니다. 그 중에서 여러 개의 API와React 응용 프로그램은 같은 코드 라이브러리에서 생활합니다.이 작업 흐름은 많은 장점이 있지만 묶음, 전송, 환경 변수, 테스트, CI/CD 등 모든 정상을 확보하기 위한 대량의 설정도 포함한다.이것은 곧 통제력을 잃게 될 것이다.이제 이러한 복잡성은 이러한 사실과 결합됩니다. 즉, 하나의 저장소가 있을 뿐만 아니라 회사마다 여러 개의 저장소가 있습니다. 그리고 몇 십 개의 다른 프로필이 있습니다. 모든 파일은 기본적으로 같은 임무를 수행하려고 합니다.한 설정에서 패키지 플러그인을 변경하는 것도 모든 다른 항목에 반영해야 합니다.Cantara의 목표는 이 모든 도구에 사용하기 쉬운 추상적인 층을 충당하여 당신의 전진을 방해하고 많은 귀중한 시간을 소모하는 지루한 부분을 없애는 것이다.하루 종일 웹 패키지를 설정하는 것을 좋아하는 사람은 아무도 없다.🙈).

🔥 입문

그만해, 이제 쓸모 있는 일을 하자.
Cantara를 사용하여fullstack 웹 프로그램을 시작하고 실행하는 것은 두 명령을 실행하는 것처럼 간단합니다.우리 시작합시다!
우선 전 세계적으로 Cantara를 설치합니다.

npm i -g cantara

전방과 백엔드 개발에 필요한 모든 개발 의존 항목을 설치해야 하기 때문에 시간이 좀 걸릴 수 있습니다.
다음을 입력하십시오.

ctra init my-fullstack-app
cd my-fullstack-app

이것은 예시 프로그램을 포함하는 새 폴더를 만들 것입니다.
이제 Cantara의 CLI 마법사를 시작하여 현재 저장소의 모든 옵션을 묻는 메시지가 표시됩니다.

ctra

dev 명령을 선택하고 응용 프로그램random-image-app을 선택하십시오. 이것은 귀여운 작은 React 프로그램으로 Unsplash의 무작위 이미지를 표시합니다.
이 React 응용 프로그램은 포트3000에서 API 서버가 실행되어야 하기 때문에 우리도 시작합시다!이 작업을 수행하려면 새 터미널에서 방금 완료한 작업 ctra -> dev 을 반복하지만 이번에는 express-api 을 선택합니다.
서버가 시작되면 localhost:8080 로 이동하여 다음을 볼 수 있습니다.

이제 react-apps/random-image-app/src 또는 node-apps/express-api/src 아래의 파일을 편집하고 응용 프로그램을 개발할 수 있습니다!새 React 응용 프로그램이나 API를 추가하는 것은 실행new 명령과 마찬가지로 간단합니다.추가 정보, go to the docs.
이 빠른 입문 안내서는 표면에만 닿지만, Cantara가 무엇인지, 그리고 다음 (또는 기존) 프로젝트를 완성하는 데 도움을 줄 수 있기를 바랍니다!
만약 Cantara가 당신의 흥미를 불러일으킨다면, 다음은 당신을 공부하게 하는 링크입니다.

📋 한층 더 읽다

Quick Start
Website
Docs
Github

💬 커뮤니티

만약 당신이 문제, 생각, 혹은 단지 이야기를 나누고 싶다면, Cantara의 스펙트럼 커뮤니티에 가입하세요!거기서 만나서 반갑습니다.👋

트위터에서 나를 찾아: