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
From idea to deploy

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

Read More…

Continue reading
11 August, 2020
Reclaim your disk space from Xcode

Do you have problems with the space on your disk? You are in the right place! This post is for […]

Read More…

Continue reading
25 June, 2020
RoR – Get your exceptions notified via Slack

Have you ever wanted to be one step ahead, and be notified of any unwanted exception before your users have […]

Read More…

Continue reading
18 October, 2018
Easy creation of a new Node + React project

Starting a new project is something everybody loves to do. However, some steps are always the same for every project. […]

Read More…

Continue reading
3 October, 2018