Easy creation of a new Node + React project

Category

Blog Development
3 October, 2018 0

Starting a new project is something everybody loves to do. However, some steps are always the same for every project. We decided to do something about that, and after a little thinking, we came up with the idea of creating a generic template to quickly start new projects that use Node as the backend technology and React for the frontend. We dedicated some time to it and had to make difficult architectural decisions, but after all, we are thrilled with the result!

You can find a live demo here

General Architecture

We now have decided which technologies use, but how are those technologies going to interact? The most used pattern is to create a REST API with Node and make the React frontend connect to that API using web services. This methodology allows two completely different teams to work simultaneously, one with the frontend and the other with the back-end, making each developer work in what they do best! Another side advantage is that you can switch React for another framework without affecting the back-end or vice-versa.

In both cases, we decided to use eslint to obtain a better code quality, and there is integration with Facebook and Google authentication services. We believe that good code quality results in better maintenance and faster bug fixing. Apart from that, we included some automatic unit tests to our templates.

React

There is a great and powerful tool to create a new React app, and it helps a lot, although, in our opinion, there are some missing details. We decided to install and configure some packages, which are normally used. We configured Redux (a great way to manage app state!), axios (with a custom instance which connects with our API), and we created some high order components to handle authentication.

Node

When it comes to Node, we didn’t know any tool, such as create-react-app to create a new project. Unfortunately, we always started from scratch. Our template uses the express framework and features a user model with a controller to handle authentication, email service, and some express middleware (which we think every app should include). There is also babel configured so you can use ES6 syntax out of the box!

Conclusion

We hope this template will be useful both for our team and other developers trying to speed more time on the complex and exciting features rather than wasting time on the tedious and repetitive stuff.

Please check the repositories:

https://bitbucket.org/kreitechteam/node/src/master/
https://bitbucket.org/kreitechteam/react/src/master/

If you have any doubts or want to give us some feedback, just leave a comment!

COMMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *

Antonio Malaquina
Wednesday October 3, 2018 - 22:10 Blog, Development
Recent posts
Managing React server state: a simpler approach

The role of the state The state is a property of each component that holds its data, it gives personality […]

Read More…

Continue reading
17 May, 2021
The Importance Of Retrospectives Meetings

What are retrospectives and why are they important? If you know SCRUM you will be familiar with the retrospective meeting […]

Read More…

Continue reading
10 May, 2021
Using Mockito to create Java Unit Test

Let’s start with the definition given by the official page. “Mockito is a mocking framework that tastes really good. It […]

Read More…

Continue reading
1 December, 2020
From idea to deploy

When the great idea and background just isn’t enough […]

Read More…

Continue reading
11 August, 2020