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
Two words: type safety.
- Node 8
- Express 4
- React 15.6
- Typescript 2.3
- Redux 3.7
- Webpack 2.6
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
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
To start a development node server, simply type
npm run nstart
As for React in development mode (server), start by typing
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
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!