npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cantara

v3.17.5

Published

![Cantara](docs/static/img/cantara.svg 'Cantara Logo')

Downloads

923

Readme

Cantara

Cantara is a CLI tool to create Fullstack React applications in minutes

  • Zero configuration: Cantara takes care of all the configurations for your project. No more fiddling around with webpack, typescript, or jest configs. There is even a config for the VS Code debugger.
  • Testing included: Have a complete testing-setup before you even wrote your first line of code. Jest and Cypress allow for all modern practices of automated software testing.
  • Backend: Fullstack applications have one or more backend. Build plain NodeJS or serverless APIs that easily connect with the rest of your application.
  • Mono-repository: All of your code lives inside a single repository. This makes it easy to share code between all your applications, while still keeping a clear separation of concerns thanks to packages..
  • Typescript: Use TypeScript throught your entire application.

Learn how to use Cantara for your next project.

Sponsors

The development of this project is sponsored by Crystal Design GmbH.

Crystal Design

Table of contents

Installation

npm install -g cantara

Getting started

You can get a new Cantara project up and running on your local dev environment in less than 5 minutes:

  1. Install the Cantara CLI.

    npm install -g cantara

    Requires Node.js version > 10

  2. Create a new Cantara project.

    Create your Cantara project with a single command:

    # creates a new cantara project using the default starter
    cantara init my-cantara-starter

    This command creates a project with the following structure:

    ├───node-apps
    │   ├───express-api
    │   └───sls-api
    ├───packages
    │   ├───core-api
    │   └───random-image-widget
    └───react-apps
       └───random-image-app
  3. Start the services in develop mode.

    Now, move into your project's directory and start each application in a separate console:

    cd my-cantara-starter
    cantara dev random-image-app
    cantara dev express-api

    Tip: You can type cantara without any parameters into your console to start an interactive CLI wizard.

  4. Open code and start editing!

    Your frontend app is now running at http://localhost:8080 and your backend API is running at http://localhost:3001. Any code changes will update your application in real time.

Well done! At this point, you've got a working fullstack application waiting to be further developed. For a more in-depth guide on what you can do with Cantara, check out the official tutorial.

Adding applications

You can have multiple applications inside your Cantara project. There are 3 different types of applications. For each type, there is a respective folder inside of your cantara project:

  • nodes-apps:
  • react-apps:
  • packages:

To add a new application to your project, simply create a folder with the application name inside the parent folder of the respective application type, and put your source code inside that folder.

For example, let's say you wanted to add another frontend application to the project from the Getting-started tutorial. To do so, you create a new folder inside of the react-apps folder called dashboard, where you put the code for your admin dashboard.

...
└───react-apps
   └───random-image-app
   └───admin-dashboard # new react app

How to Contribute

This project is still young and every contribution helps to turn this project into a mature tool that makes developer's lives easier.

Checkout our Contributing Guide to learn how you can start contributing to the project.

License

Licensed under the MIT License.