Click the badges to have a look😉
An always up to date React Template with the following technologies:
- Next.js as the react framework.
- TypeScript for type-safe code and other advantages!
- ESlint To find and fix problems in your JavaScript code.
- Hygen to create components automatically through the console.
- Jest for testing.
- Renovate to check and update packages.
- GitHub Actions for Continuous Integration.
- GitHub Pages to deploy the project.
- Commitlint to enforce conventional commit format.
- GitGuardian to check for exposed credentials.
- GitHub Issues and Pull Requests Templates to submit new Issues and Pull Requests.
In software development keeping up to date with technologies is crucial and when working on a project for a long time updating the packages that are being used is usually forgotten. And why should you do it if the project works perfectly with the current ones?
This kind of thinking makes updating and renewing the project packages to be forgotten and never done. This is why I made this always up to date React Template which always will have the dependencies updated without making the project fail.
How? Adding the renovate bot to check for dependencies updates and submit PRs to update them. Also, set up a CI with GitHub Actions to always check the build passes with the updated dependencies in the PR before merging it with master. Here I explain the full process.
I did not add any styling library to leave that personal option to the user.
Just run npm install
To update the Github Actions badge on the README.md replace reymon359
With your GitHub username (and repository name in case you have renamed it).
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Run ESLint on the project to report wrong patterns on the code, and the second one also tries to fix and format them.
It asks for a path and a name and creates a new functional component with that name in the path provided.
If no path is provided it is created in the default src/components/ path.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Builds the app for production and deploys it to GitHub Pages
Have a look at the Create React App docs about how to configure it.
- Ramón Morcillo - Initial work - reymon359