Crana - React & NodeJS apps in under a second
Tags: showdev, hacktoberfest, javascript, node
Published: 2018-10-23 19:11:24

---
title: Crana - React & NodeJS apps in under a second
published: true
description: 
tags: showdev,hacktoberfest,javascript,node
canonical_url: https://github.com/scriptify/crana
cover_image: https://thepracticaldev.s3.amazonaws.com/i/m3zv5lhpdbe5hsil8zkr.png
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/m46kkqxivtkg8ynre7cd.png" width="300" />

I've used the opportunity of Hacktoberfest and tried to publish a project I was lately working on: [Crana](https://github.com/scriptify/crana)(__CR__eate __A__ __N__ode __A__pp), a CLI tool which makes developing applications with a NodeJS backend and a React frontend a breeze.

```bash
npm i -g crana
crana init my-awesome-project
cd my-awesome-project
crana dev
```

# The problem
Most of the projects I was working on involved both a server (node.js) and a client (mostly React based). Until now I didn't find any solution which met the requirements of such projects, and copying around all of the config files for each new project over and over again is very problematic.
I wanted to have a simple tool which encapsulates all of this overhead, enabling developers to just do what they should and want: Developing. And I though this solution may also be helpful to other developers.
That's how __Crana__ was born.

# The/A solution
Crana tries to be a "just-start-developing" (JSD) solution, empowering developers to create apps without having to worry about complicated tooling or configurations. For more information, have a look at the git repository: [https://github.com/scriptify/crana](https://github.com/scriptify/crana)
__Warning:__ The project is in a very early stage and may not meet all your requirements, and bugs are more likely to happen. That's why your help is needed to make Crana the best tool of its kind!

It comes with:
- ESLint (Same config for server and client)
- StyeLint
- Webpack
    - with code splitting support out of the box
    - configured to create the best possible production build
    - all loaders pre-configured
    - webpack-dev-server for an excellent development experience
    - react-hot-loader pre-installed
- Babel
- Nodemon (enables live-reload server during development)
- The ability to easily share code between server and client
- ...and a lot of other stuff all hidden in the package itself

As all configuration files and dependencies needed are encapsulated in __Crana__ itself, you will not see  a single configuration file.

But as everything out there, Crana is not only unicorns and rainbows. The fact that everything is encapsulated in the package has many advantages, but also comes with a few downsides:
- It is currently not possible to modify/extend the configuration files
- To reason more about certain behaviour, the config files have to be looked up directly in the code of the package

But those two downsides are just another two problems which wait to be solved:
- Making the configurations extendable/modifiable per project should be the next big feature of Crana (maybe implementing something like a plugin system?)
- The documentation of Crana should be extended in a way that every decision made should be exactly written down and explained (e.g. webpack loaders, babel config, eslint config etc.)

And maybe you are the one who is going to solve those issues!

Summarizing, I think that __Crana__ is a very useful tool for many (new and existing) projects out there, following slightly different concepts than other similar tools. But most importantly, this projects needs __you__, be it as a user or a contributor, more than anything else to fullfil its _modest_ vision.

I would love to hear your comments!

(You can also reach me on Twitter: @scriptifyjs)