DEV Community

Cover image for Crana - React & NodeJS apps in under a second
Maximilian Torggler
Maximilian Torggler

Posted on • Originally published at

Crana - React & NodeJS apps in under a second

I've used the opportunity of Hacktoberfest and tried to publish a project I was lately working on: Crana(CReate A Node App), a CLI tool which makes developing applications with a NodeJS backend and a React frontend a breeze.

npm i -g crana
crana init my-awesome-project
cd my-awesome-project
crana dev
Enter fullscreen mode Exit fullscreen mode

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:
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)

Top comments (10)

mandaputtra profile image
Manda Putra

Thanks for sharing ❤️ I had stack Vue with Node / Express. So when it comes to this i found feathersjs is cool because they had feathers-vuex, and it works out of the box.

since feathers are just combination of express and socket the syntax are not the problem.The problem is out-of-the-box feature. i must understand it before use, cause when it comes to customization it could be headache 😂

like to setup my own project so it can stay simple.

scriptify profile image
Maximilian Torggler

If "out-of-the-box" is good documented and you know what you are using it shouldn't be a problem anymore, but I totally get your point. When you have a look at the roadmap, "extensions/modifications" are the next big feature for Crana: Then you will be able to extend/modify every single aspect of Crana (this means that React will be made optional and extension for every library/framework etc can be created quiete easily). This has the big advantage that nothing is redundant and you have a "single source of thruth" for configuration files (etc.) for all your projects. So when you find a bug in e.g. the webpack config, you fix it once for all your projects (and with extensions you will not loose flexibility).

mandaputtra profile image
Manda Putra • Edited

Yeah thats it, and i actualy look at the roadmap first then comment here. haha.

I would love to fork and maybe make another template for the client. Its insteresting.

sethusenthil profile image
Sethu Senthil

Wow that's my stack! So a 'Crana' app is basically React + Node "combined"?

scriptify profile image
Maximilian Torggler

Cool! It equips you with all the needed development tools for fullstack JS apps, so you immediatly get up and running with a NodeJS backend and a React frontend, all development tools pre-configured.

eben_kb profile image
Ebenezer Adjei

Thumbs up to you. This should be awesome, I will try it out right away.

papaponmx profile image
Jaime Rios

Neat, thanks for sharing.

carlossz profile image
Charles S.

Woooh, awesome! I'll try it tonight!

davidjdavis profile image
David J. Davis • Edited

How would this be much different than a node/express server side rendered next.js app?

scriptify profile image
Maximilian Torggler • Edited

It doesn't make any assumptions about what you do in the backend. It could be a REST API, a GraphQL endpoint, SSR, ... Crana just equips you with all the needed development tools for fullstack JS apps (similar to Create React App)