Cantara 💙 - A CLI tool to create Serverless Fullstack React apps in minutes
Tags: showdev, typescript, node, react
Published: 2020-04-15 10:03:32

---
title: Cantara 💙 - A CLI tool to create Serverless Fullstack React apps in minutes
published: true
description: Cantara stands for: Create A Node, TypeScript And React Application. It is a zero-config tool for developing (one or more) React Applications with one or more Serverless endpoints or NodeJS APIs, organized in a Monorepository, using TypeScript on all layers of the stack.
tags: showdev,typescript,node,react
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9ou3v5kydw36ofneovp3.jpg
---
Today, I am happy to announce the release of a project I was working on lately: 
     **:boom: [Cantara](https://cantara.js.org/)** :boom:

**A CLI tool to create (Serverless) Fullstack React apps using TypeScript**

![Cantara CLI Wizard](https://cantara.js.org/img/ctra_dev.gif)

[Website](https://cantara.js.org/) • [GitHub](https://github.com/CantaraJS/cantara) • [Chat on Spectrum](https://spectrum.chat/cantara)

## :question: The WHAT
**[Cantara](https://cantara.js.org/) stands for:**
**C**reate **A** **N**ode, **T**ypeScript **A**nd **R**eact **A**pplication.

It is a **zero-config** tool for:
- developing (one or more) React Applications
- ...with one or more Serverless endpoints **and/or** Node.js APIs
- ...organized in a Monorepository
- ...using TypeScript on all layers of the stack

It also makes it easy to share code between layers or to external consumers as packages, which can be used internally or from the outside using NPM.

Cantara aims to cover all aspects of the application development lifecycle for monorepository codebases:
- Development
- Testing
- Building/deploying/publishing
- Continous Integration
- ...and so on

It could also be described as **the create-react-app for Fullstack applications**.

**So essentially a tool to make Fullstack TypeScript app development a breeze.** 
**:sparkles:Less configuring, more coding.:sparkles:**

### :zap: Features

- Develop client side rendered React Apps (like you can do with create-react-app)
- Develop and deploy serverless APIs
- Develop Node.js applications (e.g. an express based REST API)
- Develop React Components/JS packages, use them in your application and publish them to NPM
- Write unit/integration/e2e tests

## :grey_question: The WHY
Most of the projects I am and was working on professionally, be it as a solo-dev or in teams, are structured as large monorepositories, where multiple APIs and React Apps are living in the same codebase. This workflow has a lot of advantages, but also includes a tremendous amount of configuration to get everything right: bundling, transpiling, environment variables, testing, CI/CD, just to name a few. This can get out of hand pretty quick. Now combine that complexity with the fact that there's not only one such repository, but multiple per company: Then you have dozens of different configuration files lying around, all trying to achieve basically the same task. Changing a webpack plugin in one configuration should also be reflected in all the other projects. Cantara aims to act as an easy to use abstraction layer over all those tools, taking away the boring parts which just hold you back and cost a lot of precious time. No one likes to spend the whole day configuring webpack (ok,  except me probably :see_no_evil:).

## :fire: Getting started
Enough talk, now let's do something useful with it.
Getting up and running with a fullstack web application using Cantara is as easy as executing two commands. Let's do this!

First, install Cantara globally:
```bash
npm i -g cantara
```
This can take some time, as all development dependencies needed for frontend and backend development need to be installed.

After that, just type:
```bash
ctra init my-fullstack-app
cd my-fullstack-app
```
This will create a new folder with a sample application in it.

Now, start Cantara's CLI wizard, which prompts you with all the options you have in the current repository:
```bash
ctra
```

![Cantara CLI Wizard](https://cantara.js.org/img/ctra_dev.gif)

Choose the `dev` command and then pick the application `random-image-app`, which is a sweet little React app displaying a random image from Unsplash.
This React app expects an API server to be running on port `3000`, so let's start that one too! To do so, repeat what you just have done (`ctra` -> `dev`) in a new terminal, but this time select `express-api`.
As soon as the server started, you can navigate to [localhost:8080](http://localhost:8080) and should see the following:
![Cantara simple starter](https://cantara.js.org/img/starter_app.png)

Now, you can edit the files under `react-apps/random-image-app/src` or `node-apps/express-api/src` and start developing your app! Adding a new React app or API is as easy as executing the `new` command. For more information, [go to the docs.](https://cantara.js.org/)

This quick start guide merely scratches the surface, but hopefully gives you an idea of what Cantara is and how it can help **you** with your next (or existing) project!

If Cantara sparked your interest, here are some links to get you started:

## :clipboard: Further Reading
[Quick Start](https://cantara.js.org/docs/quick_start)
[Website](https://cantara.js.org/)
[Docs](https://cantara.js.org/docs/docs_intro)
[Github](https://github.com/CantaraJS/cantara)

## :speech_balloon: Community
If you have questions, ideas or just want to have a chat, join Cantara's Spectrum Community! I'd be happy to meet you there :wave:
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/cantara)
Find me on Twitter: [@scriptifyjs](https://twitter.com/scriptifyjs)