Starter project for React, Bootstrap and Swagger-generated API, built with Webpack.
There are many tutorials for simple React scaffolds. But, in real life and in a real project you need a few extra bits and bogs. Building those bits and bogs for the browser is a lot of pain that the simple tutorials don’t prepare people for.
Presenting here a strong React starter project that’s used in our latest real life frontend projects. It adds pretty Bootstrap templates and modals, works with the backend API, and is deployed to Netlify with zero effort.
In the box:
- React and Webpack
- A Swagger-generated API library, to consume backend services. You can of course generate your own API’s frontend library on editor.swagger.io (or using swagger-codegen).
- Bootstrap including jQuery and support for custom templates
- Build command that can be used to deploy the project on Netlify (or Amazon S3), for simple CI/CD
- Development server with hot reload
- ESLint with ES6 settings and built-in support for VSCode
$ yarn install
cp -R ./.vscode.example ./.vscode
$ yarn dev
$ yarn build
You can point any other IDE's to the eslint config in .eslintrc, or just use eslint from console:
$ ./node_modules/.bin/eslint <JS_FILE_PATH> --fix
The current dummy backend is localted under lib/api. Replace this with other API generated here.
If you set up a CI/CD (for example using S3 or Netlify: simply build with yarn build and then copy all static files from dist/ to the bucket or service.)
MIT, do-with-the-code-whatever-you-please License
Richard Dancsi
- Blog: wimagguc.com
- Github: github.com/wimagguc
- Twitter: twitter.com/wimagguc
- Linkedin: linkedin.com/in/richarddancsi