loading...
Cover image for Nodejs Starter - Full-Stack React Material Kit

Nodejs Starter - Full-Stack React Material Kit

sm0ke profile image Sm0ke Updated on ・4 min read

Hello Coders,

Lately, I'm focusing a lot on boilerplates and starters in order to save an important resource: time. You may not use it before a boilerplate, and this is ok, but in my case, when I start a new project in Nodejs, I try to avoid much as I can to code the bottom layer of the product. This phase usually, is boring, not so creative and relatively time-consuming.

In a rush? Access the product page, grab the code and build something nice for your clients: Full-Stack React Express - Material Design

This article presents a Nodejs Starter that I've used to speed up a little my development for some products written in Javascript, in the last few months. Bellow is the look & feel of the final app.


PROMO: Black Friday REACT - 90%OFF by Creative-Tim

Black Friday REACT by Creative-Tim


What is Nodejs

Nodejs is a JavaScript runtime environment that includes everything you need to execute a program written in JavaScript in your favorite operating system. Basically, what you can execute in the browser, by using Nodejs, you can execute directly in the operating system and do things just like Python or Ruby.


What is a Boilerplate / Starter

In computer programming, boilerplate code refers to sections of code that have to be included in many places with little or no alteration. Write once, and reuse over and over. You may read more about boilerplate code on Wikipedia.


Material Kit React

Material Kit React is a Free Material-UI Kit, coded in React with a fresh, new design inspired by Google's material design. Read more about Material Kit React on the official product page.


The Nodejs Starter is built using a decoupled architecture, where the Material Kit React frontend communicates with the Nodejs / Express backend through secure ajax call.

To use and start this starter, a few simple steps must be followed:

  • clone, build and start the Nodejs Starter backend
  • clone, built and start the Material Kit React frontend
  • update the code and add your magic on top of the existing boilerplate code.

Let's say a few words about each side of this starter


Material Kit React Frontend

To have a fully functional React frontend, I've added on top of the existing design the necessary code to handle the authentication and registration. Users will enter the classic email / password information and the account will be created if not exists already in the backend service.

Built & start the frontend

$ # clone the react Frontend 

$ git clone https://github.com/app-generator/material-kit-react.git
$ cd material-kit-react
$ yarn # to install the dependencies
$ yarn start 
Enter fullscreen mode Exit fullscreen mode

If all goes well, the frontend should be visible in your browser at the address localhost:8080. At this moment we have the front end app, floating in the air. No connection so far to a real back end. let's do something about it.


Nodejs Backend

Nodejs Starter is already equipped with some basic modules and features, to help you jump over the basic setup:

  • Express backend
  • ORM Sequelize, on top of SQLite database
  • Passport, JWT for authentication
$ git clone https://github.com/app-generator/nodejs-starter.git
$ cd nodejs-starter
$ yarn
$ yarn start
Enter fullscreen mode Exit fullscreen mode

I will update this article with new information, based on the reactions and comments. Sometimes, using a boilerplate, from a trusted source can help you to save some valuable time and speed up a little the development speed.


Other Nodejs Starters


Related Articles


Thank you!

Discussion

pic
Editor guide
Collapse
tamouse profile image
Tamara Temple

I use similar things, also generators, to crank up a quick environment for learning something outside of the product I work on; so I have made a lot of these things. Great way to get up and running where you want to be when you start.

Collapse
bus42 profile image
Greg Brewton

Honest question from a newbie: Why do you need a back end if you're developing with React? Would it be faster and easier to use something like Firebase if you need a database, or authentication?

Collapse
mongopark profile image
Ola' John Ajiboye

You can think of firebase in the context you mean here as BackEnd as a service.Giving you database, Authentication etc. It means you have little control on how you'd write many part of your code. You have to do it Firebase's way. It has the advantage you don't have to manage your own servers etc.

Collapse
sm0ke profile image
Sm0ke Author

Fully agree with you.
Choosing a stack depends on many factors like knowledge, costs, app features .. etc.

Firebase, for sure, is a great platform and helps a lot but from my point of view has some drawbacks:

  • The SQL. I didn't vibrate with that JSON storage
  • Costs
  • You can easily reach the limits ( connection, storage.. )

After using the platform a while, I decided to move away.
In the same time, I'm not advising anyone to do the same.

Collapse
sm0ke profile image
Sm0ke Author

Hello,

Depends on your knowledge, app architectures .. etc. You can do the same thing in many ways. Firebase is great but I'm not a fan of jailed platforms.

Just saying. :)