Here are some simple starter projects for Node and React I’m using. I’ve got a bit sick of using create-react-app and seeing a mountain of security vulnerabilities before I even start. The number of errors seems to range from 5 medium level warnings to over 30 issues including critical ones. I know they aren’t real issues but I just don’t want to see them, therefore I’ve set up my own starter projects in GitHub, freely available for downlaod. They cover a few common scenarios that I know I’ll be using. Each project has
- Basic set up including dev and production builds.
- A smoke test with jest
- A script to update it with the latest version of all packages.
Prerequisites
I’ve assumed you have the LTS version of node and npm installed. Current version of node and npm is at
https://nodejs.org/en/download/
React with JavaScript
A starter project with React and JavaScript downloadable from here
https://github.com/timbrownls20/Starter-Projects/tree/main/react
It uses Babel so it supports modern JavaScript and webpack to bundle the output and provide hot reloading during development. Testing is using jest and react-testing-library. The target browsers are defined in package.json
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
So, for production it’s any live browser with more than 0.2% share of the market that isn’t opera mini. That can be changed as needed.
The built-in npm scripts are
npm start – runs dev build
npm test – runs all tests. An initial smoke test is provided
npm run build – builds the project into the dist folder for deployment
npm run build:start – builds the project and launches a server so you can visually check the build works
npm update – forces an update to the most recent version of the packages, installs all modules then runs the smoke test to check everything still works.
React with TypeScript
A starter project with React and TypeScript downloadable from here
https://github.com/timbrownls20/Starter-Projects/tree/main/react-typescript
It’s the same as React with JavaScript except (rather obviously) it uses TypeScript. All tests are in TypeScript too. The npm scripts are the same but I’ll repeat them
npm start – runs dev build
npm test – runs all tests
npm run build – builds the project
npm run build:start – builds the project and launches a test server
npm update – forces an update to the most recent version of the packages, install all modules then runs the smoke tests
Node with TypeScript
A starter project with Node and TypeScript is downloadable from here.
https://github.com/timbrownls20/Starter-Projects/tree/main/node-typescript
No babel or webpack needed as it’s not required for a basic Node set up. If you wanted hot reloading or minification then you would need webpack, but this is not in scope for this.
In addition to TypeScript the project has jest and supertest installed for testing. Express is also installed and a test page setup with a simple server so you can check it works.
The built-in npm scripts are similar to before
npm start – runs dev build
npm run test – runs all tests. An initial smoke test is provided, that launches the server and checks the default route is working
npm update – forces an update to the most recent version of the packages, install all modules then runs the smoke test to check everything still works.
npm start:monitor – Runs the dev build through nodemon so the dev server is restarted when there are changes. You need to have a global install of ts-node for this to work (run npm install -g ts-node on a terminal)
Node with JavaScript
No starter project for node with JavaScript as it’s easy to set up. Just run
npm init -y
in an empty folder and you’ll be good.
Closing comments
I actually think create-react-app is brilliant but I wanted to build projects up from scratch so I could really see what’s going on. I’m a fan of basic principles and having a heap of hidden webpack config that is basically witchcraft is never going to feel great.
How useful this is for production builds is up for debate. In my company we’ve decide to use NextJs for React and NestJS for Node so we’re never going to do this. I will stick to these starter templates for side projects and having a stripped down build is always going to be useful for proof of concepts and troubleshooting when you don’t want any mystery between your code and Node.
Useful links
https://github.com/timbrownls20/Starter-Projects
All my starter projects. I’ll got a few more in mind and they will be here too.
https://create-react-app.dev/docs/getting-started/
As I say, I like create react app but I wasn’t joking about all the warnings – it’s a pain
https://jestjs.io/
https://testing-library.com/docs/react-testing-library/intro/
https://www.npmjs.com/package/supertest
Jest, supertest and react testing library – my basic test setup.
https://www.carlrippon.com/upgrading-npm-dependencies/
Good article on how to upgrade npm projects
https://webpack.js.org/concepts/
Webpack documentation. Setting up the React starter projects is mostly an exercise in webpack configuration which can be confusing. A colleague said to me that it has been years since he manually amended webpack configuration, so it’s likely you’ll never need to know this. I like to get down and dirty with config options though – it’s how I like to spend my Sundays.
