My full stack setup with React

#react #node #javascript #webdev

Summary: In this post, I'll share my React-Express starter app, with some additional details and thoughts. Enjoy!

The stack-nado age we're in 🌪

Currently, we're living in times when it can be pretty hard to decide what technology is the best for our application. Although this confusion is actually just a facade - we're perplexed by the many colors of screwdrivers that we can pick up.

Don't get me wrong, clearly, technologies have their areas of expertise, as they're all born to solve a specific problem. But the thing is, we humans are quite good at the abstraction of problems - which results in us identifying similar root problems. This is how tools like Angular and React end up solving the same issue - modularized frontend. Also, this is why developers tend to say, that more often than not, your stack is just preference, rather than technical necessity.

Picking a screwdriver

What I can tell you, however, is how I do/did these choices. I believe I'm a very versatile coder - one might say "Jack of all trades, master of none". What this means is that I'm not afraid to touch any part of the development process let it be frontend design or build optimization.

C'mon, I came to web development from corporate DevOps engineering.

When it was time to choose a js framework/library, I chose to work with React because it was the most popular at that time. What this meant to me, was that it will be easier to find answers for it on StackOverflow. I'm a simple guy.

So this throws out MEAN stack. I was also insisting on using the least possible languages, so to stay in the javascript world LAMP was out of the picture too.

Server or serverless

The next choice is different, as it's more about features than preferences. I love JAM stack solutions, for the ease of deployment and cost-effectiveness that they provide. When it comes to implementation, I prefer to use Gatsby and just let Contentful/Wordpress and Netlify handle the backend.
There are those times however when you want something more than just displaying static instances of some data models.
But still!
Even when I need to create fully dynamic applications with database and login I prefer to use some lightweight solutions - like handling all these things from google Firebase and just stay on JAM stack land.

Fullstack land

Anyhow, sometimes you just can't live without your own API. A lot of times my clients choose to have custom solutions. They don't want to pay to a CMS, or they want to avoid Firebase vendor lock-in, and just prefer to run everything on AWS EC2. Another example when you need to set up some service to support another application.

These are the times when I go for MERN.

Or in my case PERN, as I prefer PostgreSQL over MongoDB. Unfortunately, it can be tedious work to set up all the dependencies and environment for this kind of app (or to undress some developed app just for the setup), hence came the idea to create some template.

So, I've created this super simple application base that can serve as a starting point for these full-stack apps. I've set it up in a way to support all my preferences, like CSS preprocessing, my linter setup, and so on. I'm sharing it hoping that it can help others too when starting a new project having a similar stack setup in mind.

Give us that starter app finally...

Source code is accessible here.
The app is a starter - hence it's super simple. There is a demo of it on Heroku. It's basically just a React frontend that can send two kinds of requests to its server and handle the responses.

It has a Node Express backend where there is an example to help creating sub routers when implementing various API functionality.
The frontend is React bundled with Webpack.
For styling I'm using Sass CSS preprocessor, to support modularization.
Frontend requests are run with Axios.
It also contains my preferred prettier and eslint setup.