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!
