[ReactJS] what you should definitely have in your toolbox - from 0 to 90 in 1'

[ReactJS] what you should definitely have in your toolbox — from 0 to 90 in 1’

Adjust your development setup to your comfort not fashion

The problem

I was getting around ReactJS to cook a complete PoC (Proof of Concept) with a simple REST API, seasoning Automation to taste…

Being new to ReactJS and Docker… happy to see a plethora of tutorials, boiler plates and guides to help the setup and delivery of an end-to-end optimized and scalable platform.

But… no, I am not really happy(!?)

Things move fast, they get outdated 📆 even faster and the valid possible ways to do something, are getting exponentially more 📈🥶.

The research

Most of the guides are narrow scoped, well written, but not complete. I was too new to all this to get my head around on what’s simple rather than just fancy.
All I wanted, was just a simple setup to get something meaningful up and running, that I won’t have to throw away later for a another new little PoC project.

My head, after a little understanding, was in this state:

Docker, compose or Dockerfile, local-dev-server, yarn, build:dev, build:production, testing, eject … don’t eject, react-named env vars, docker again but for development, nodemon, React component class or component functions with hooks, but then Redux, but not with connect, oh … Router too, axios, but authentication before routing, but Redux has stores, split them for the components’ state, merge them, don’t touch them directly, but dispatch actions, use middlewares for the REST API…

Yes, all that, you can surely find around in guides, mix and match and find what suits you, just LMGTFY.

After some head-scratching, I was happy with my resulted project. Thinking… “ok, this is a nice kick off … because I built it by understanding each step”. I was failing and understanding each step. Therefore, I don’t want to make yet another “here take this boiler plate, has this features, is good for you”.

The suggestion

Adjust your development setup to your comfort not the fashion.

Avoid any of those all in 1 tutorials, wrapping the wrappers in a wrapped up world, to give you the “one click setup”. Use them to cherry-pick, get some deeper understanding, or just as partial examples.

A few reasons that those will fail to be your final solution:

• mixing and matching what the fashion is, for each tool / framework / deployment process
• trying to be flexible for every setup concept and functional at the same time
• a set of best practices that might not meet yours
• one or some parts of it might be out-dated

Changing some parts of it, without deep understanding will get you in a domino side-effects and incompatibilities. Consequently, this will break any intermediate component of your setup that otherwise would be able to be easily updated (for example webpack in react scripts, and the tempting power the “npm run eject ” would give to you)

The solution

Github templates

My golden rules on that:

• Don’t make it perfect, it will never be. — Make it functional enough.
• Put only the common things you need in every PoC.
• Source files, to the point that you have a basic setup of the platform
• Dynamically picking config (environment variables)
• Testing template
• Documentation about what you have, in order to come back and make it better every time, or for your team to understand and evolve
• Deployment files to any free cloud infrastructure
• Sample 2 deployment environment switches, one for easy development mode (maybe for local too) and one for production

The takeaway

I managed to make my version of template without sacrificing any best practices, of the components I managed to put together.

Below is a little sketch describing the 2 main entry points, for development or production build:

the logic behind dev-prod environment switching

• environment files for local and deployed versions with appropriate flags in both projects (Client / Server)
• automated deployment files
• node scripts to start or build each project
• docker files / compose to do use the above
• simple NodeJS Rest API as sample to keep the file structure / modular architecture
• simple ReactJS to showcase the Environment setup and some basic components in the ReactJS side, to keep it simple (no eject):

• Routers and Authentication to manage basic navigation pages
• middleware to control actions (including network requests)
• hooks gave simple syntax and very understandable for a beginner
• axios REST requests, to connect this with the back end API

Keeping templates of your work will help in many ways. Sharing them, and keep improving them, can be proven better than random tutorials and how-to guides (eventually is great to have both together of course). Fork a template to modify the things you need, but make sure you deeply understand each part of it.

also on medium

HAVE FUN
ENjOY