What's included? (preview deployment)
| Name | description |
|---|---|
| @storyofams/next-api-decorators | Collection of decorators to create typed Next.js API routes, with easy request validation and transformation. View docs |
| @storyofams/react-ui | Collection of UI components build to create a production grade front-end experience. View components |
| @storyofams/next-password-protect | Password protect your Next.js deployments. View demo (Password is secret) |
| cypress | cypress-testing-library implemented throughout. Be sure to have a look at their docs |
| date-fns | Enabling data manipulation in a comprehensive, yet humanly understandable fashion |
| eslint | Ensures best practices are top of mind. Uses @storyofams/eslint-config-ams to get up and running quickly. |
| husky | Used to trigger specific actions on commit (linting files and commit messages) |
| jest | react-testing-library implemented throughout. Be sure to have a look at their docs |
| sentry | Integration to toggle the sentry implementation on or off without the hassle |
| sitemap-handler | Simple implementation for xml-sitemap creation. |
| storybook | Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. |
| SWR | For all your data-handling needs (might get replaced by react-query in the near future) |
| typescript | Because building a javascript in this day and age git just doesn't feel right without it |
While we are working on a fancy generator to get the generics bits inserted for you, the easiest thing to do is to clone the repo.
Replace the theme file with your own and go through the files and folders to replace "Story of AMS" references with your own.
Basic theming is located in src/styles/theme folder.
For more information on theming and styling see @storyofams/react-ui.
- src
- components
- home // components specific to the home page
- common // for all shared components
- List
- list.test.tsx
- list.stories.tsx
- index.tsx // actual component lives here
- config // constants & env variable export
- hooks // custom hooks
- lib // utils, helpers, etc
- pages
- styles // theme folder location (& css-reset + typesript)Uses next-seo.
Utilizes a default config to get up and running quickly (see src/config).
Always include a <NextSeo /> tag with minimal information included on page level.
This project comes out of the box with a sample implementation of Sentry (including sourcemaps).
You can enable the implementation by setting the keys you've generated as environment variables in your application.
To get it fully operational requires:
- generating keys in sentry
- setting up environment variables
The following keys are needed for the sample implementation:
- NEXT_IS_SERVER
- NEXT_PUBLIC_SENTRY_SERVER_ROOT_DIR (Used to improve readability of the framepaths in the sourcemaps)
- NODE_ENV (Sentry is only enabled when the `NODE_ENV` is production)
- NEXT_PUBLIC_SENTRY_DSN (The DSN tells the SDK where to send the events)
- NEXT_PUBLIC_COMMIT_SHA (Sets the release)To be able to upload the sourcemaps, you will need to add the following keys
- SENTRY_ORG
- SENTRY_PROJECT
- SENTRY_AUTH_TOKENWhen all the Sentry configuration env variables are set, the Sentry webpack plugin gets pushed to the webpack plugins, to build and upload the source maps to sentry.
This is an alternative to manually uploading the source maps and is disabled in development mode.
Open an issue with your proposed change.
See contributing.md to see how you can get started.