nexpy-frontend-boilerplate is an Nexpy.io open source template repository for front end development based on Next.js and TypeScript.
Documentation is under construction and may not be fully available.
Use the package manager yarn to install the dependencies.
Important: Make sure you have the yarn installed globally as it is necessary for use the project's features.
Install yarn with the following command:
npm install -g yarnInstall dependencies with the following command:
yarnThe postinstall script will run automatically. If you notice that this has not occurred, run the following command:
yarn postinstallThis command will install the husky hooks in the git repository to control preprocessors for commits and pushes, such as code formatters and Eslint, and the required automatic project settings.
In this project you can find several interesting technologies, such as:
-
Open source library of components and styles based on @sxtyled/styled-components.
By using this lib, we adopt the possibility of full styling via prop and the full reuse of even the most basic components. This increases the scalability by a million times while making the final bundle much smaller.
-
Another open source library created by Allan Oliveira, was dedicated to improving performance and making it easier to use contexts in React.
-
Sentry
-
PWA
-
Jest
-
Cypress
-
Mobile gesture control
-
Next.js and server side/static generation
There are others being used and they can be found in the development dependencies and dependencies section of the package.json file.
initially, use the sample environment variables .env.example file to create your .env own file.
Note that the NEXT_PUBLIC_SENTRY_DSN variable is not mandatory if NEXT_PUBLIC_IN_LOCAL_DEVELOPMENT=true is set.
If you look at the scripts inside package.json you will see several methods, among them:
yarn devA server with a fast refresh for development. Do not use for production.
yarn reinstallAsynchronously deletes all dependencies and reinstalls using yarn.
yarn commitUse the yarn commit command to start the git-cz cli. With
that we can make the commits in a standardized way.
yarn buildCreates an optimized production build of the application. The output displays information about each route.
yarn startThe application should be compiled with next build first.
The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:
npx next start -p 4000Or using the PORT environment variable:
PORT=4000 npx next startNote: PORT can not be set in .env as booting up the HTTP server happens before any other code is initialized.
yarn type:checkRun a test using the TypeScript compiler to identify code typing failures.
yarn prettierAuto-formats code using Prettier. This command writes possible corrections to the project files.
yarn prettier:checkChecks that all files follow the style pattern without changing them, reporting possible errors to the console.
yarn eslintLooks for code integrity errors and fixes where possible. This command writes possible corrections to the project files.
yarn eslint:checkLooks for code integrity errors in all files without changing them, reporting possible errors to the console.
yarn testRun the automated tests using jest.
yarn storybookA server with a fast refresh for components documentation development (Docs). Do not use for production.
yarn build:storybookCreated a production build for storybook (Docs).
This project is licensed under the MIT license.