typescript-fullstack-boilerplate

Full Stack Typescript Boilerplate

Why Full Stack?

• Working with only one repository

• Only one server needed to deploy the application - even if you were to deploy it on the same server, having it all in one place reduces the effort in finding your way around the project

• Separate consoles in development - more often than not, it's a good idea to run React application and Node application in separate consoles. Both work differently and it's ok to accept them as such. But in reality, we only need them separate in development.

• Multiple build locations - It's way simpler to add more react projects on top of it, just duplicate the react folder and adjust redirects from the server

• Only one package.json - This is especially important. One package.json means one node_modules. And that means no duplicate code, dependencies or packages killing themselves and causing you headaches

Why Typescript?

Two words: type safety.

Technology stack

• Node 8
• Express 4
• React 15.6
• Typescript 2.3
• Redux 3.7
• Webpack 2.6
• Jest
• Scss

Getting started

In order to start the project, you will need Node 8 installed! Please visit nodejs.org and fetch the latest version.

Install all required dependecies with

yarn install

or

npm install

Create a .env file in the project root where you will keep the environment variables. Using the environment variables is based on the dotenv package, whose details can be found here: https://github.com/motdotla/dotenv

Example .env

NODE_ENV=development

To start a development node server, simply type

yarn nstart

or

npm run nstart

As for React in development mode (server), start by typing

yarn rstart

or

npm run rstart

If you would like to build node, react or both, use one of the following commands respectively

yarn node-build
yarn react-build
yarn build

or

npm run node-build
npm run react-build
npm run build

To keep everything simple, a simple npm start script will have everything prepared for production. No additional configuration needed.

Where to from here?

Well, the usual stops are setting up a process manager, adding a database (SQL/NoSQL) and everything else you might need on your project. Since these additions are quite simple to add and specific choise of one is quite dependant on the project, I decided to leave it out from the boilerplate.

Should there be a sufficient amount of request for additional features within the boilerplate, I'll give it an update! In the meantime - happy coding!