Starting a new project is something everybody loves to do. However, there are some steps which 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 easily 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 really happy with the result!

You can find a live demo here

General Architecture

When it comes to developing a web application the most common pattern is to use some backend technology which will run in the server and some frontend technology to render the UI for the user. Popular example technologies for backend are Node, Django, Ruby on Rails and Java. Some frontend examples are React, Angular and Ember. Our first hard decision was the technologies to pick. This is not an easy task since changing at the middle of the project is not an option and we didn’t want to waste time on a template that we wouldn’t user later. The main reason for selecting Node and React was that our team has great expertise in those technologies.

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 at the same time, one with the frontend and the other with the backend, making each developer work in what they do best! Another side advantage is that you can switch React for another framework without affecting the backend 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 a 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 usually used. We configured Redux (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, an 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 sped more time on the complex and interesting features rather than wasting time on the boring 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!