My full stack setup with React
Tags: react, node, javascript, webdev
Published: 2020-03-26 14:25:20

---
title: My full stack setup with React
published: true
description: Description of my react-express workflow.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3j17ef6li864j61qktlz.jpg
tags: #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
![Angular vs React meme](https://dev-to-uploads.s3.amazonaws.com/i/72cnjjpxf41pesy98let.jpg)
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](https://en.wikipedia.org/wiki/MEAN_(solution_stack)) stack. I was also insisting on using the least possible languages, so to stay in the javascript world [LAMP](https://en.wikipedia.org/wiki/LAMP_(software_bundle)) was out of the picture too.

## Server or serverless
![Morpheus meme](https://dev-to-uploads.s3.amazonaws.com/i/w66hpacq1mxesxzg46vx.jpg)
The next choice is different, as it's more about features than preferences. I love [JAM](https://jamstack.org/) stack solutions, for the ease of deployment and cost-effectiveness that they provide. When it comes to implementation, I prefer to use [Gatsby](https://www.gatsbyjs.org/) 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](https://firebase.google.com/) 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](https://www.educative.io/edpresso/what-is-mern-stack).

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](https://github.com/rlenkov/fullstack-starter)**.
The app is a *starter* - hence **it's super simple**. There is a **[demo](https://pencillr-demo-app.herokuapp.com/)** 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](https://expressjs.com/) 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](https://sass-lang.com/) CSS preprocessor, to support modularization.
- Frontend requests are run with [Axios](https://www.npmjs.com/package/axios).
- It also contains my preferred [prettier](https://prettier.io/) and [eslint](https://eslint.org/) setup.

Hope you'll find it useful!

![plusone](https://thepracticaldev.s3.amazonaws.com/i/ypvzafveynm5q1njmrs3.gif)