DEV Community

Cover image for I built a React app generator.
Leopold
Leopold

Posted on • Edited on

I built a React app generator.

I am proud to announce I finally built my first desktop application. And even if I can't consider it to be in a production-ready state for now, it is usable and I was really looking forward to sharing this work and see if it can interest some react developers.
 

What is this ?

The application is called reactirator.
It is a desktop application built with Electron using TypeScript, React and Node. The objective is to provide a simple GUI to create a React.js application with any configs and packages you need. So you can focus on the code as fast as possible.

screen
Updated screen of the current application state 20/01/2022
 

Motivation

Some months ago I did learn about how to build my own boilerplate and install them like create-react-app does.
I made an article about this.

Build and use boilerplates according to your needs is cool but it can lead to a lot of project maintenances and efforts. Often you also have differents requirements than in your previous project so you will be looking for another boilerplate or make your own again and ending up with a ton of different boilerplate to maintain... or just come back to a very generic one like create-react-app if you're bored !

So I went a bit further to find a more optimal solution for my need and this is why I started to build this. It does generate a react app on top of create-react-app so you get all the advantages of CRA but where you can also chose your config and packages then push the create button like you would command a pizza.
 

Techs corner

As a javascript developer, I definitely enjoy working with electron, everything is full javascript and so you can build beautiful desktop app even if you are a frontend developer.

I encounter some technical difficulties though :

  • I haven't found another way to gather the npm package size data but to use the npm registry, problem with that is : it can't be fetched (cors issues) and so I have to use the old request module !
  • A few packages installations such as tailwind require quite a lot of configuration to do on a CRA app : have a look here, at this time I haven't found another way than to "hardcode" some packages version (for example, tailwind requires postcss 7, autoprefixer 9 etc.) to have it installed which is definitely not ideal for maintenance reasons.

If you have any idea, those are listed in the issues list in github.

In the long run the project goal is to extend the possible customizations providing you more control over the generation and more advantages to use this project (for example, custom script command in the package json file etc.).

Alright, Thanks a lot for reading ! I am glad to share Reactirator and if anyone want to contribute don't hesitate, whether you are a total beginner or not.

https://github.com/Leopold-V/Reactirator

Have a good day.

Top comments (9)

Collapse
 
arndom profile image
Nabil Alamin

Really nice 👌

Collapse
 
sebastianfrey profile image
Sebastian Frey

How about Axios instead of request?

Collapse
 
leopold profile image
Leopold

The issue is npm registry does not allow anything coming from localhost whatever you are using fetch, axios etc. but good news apparently it works with a proxy so i should be able to get ride of the request module soon!

Collapse
 
sebastianfrey profile image
Sebastian Frey

Interesting, maybe you can use make-fetch-happen? This package is used by npm internally to access the registry.

By the way, nice project. 👍

Thread Thread
 
leopold profile image
Leopold

Thanks a lot for the information, it looks like a solid solution !

Collapse
 
fe99lo profile image
Felix Onkangi

You have done a great job. I tell you?

Collapse
 
amoghtelkar profile image
amoghtelkar

Super bro 👏🏻

Collapse
 
netanelvaknin profile image
Netanel Vaknin

Wow! Great project. Thank you for sharing!

Collapse
 
leopold profile image
Leopold

It's my pleasure!