Will need to update this readme
npm install
For development,
npm run dev
For production,
npm run build:fab
then,
npm run start
We are using ESLint and Prettier for code linting. Please set your code editor to format on save. For Visual Studio Code, you can simply open your VSCode Preferences -> Settings and set the Format On Save option to true for either your user, workspace or folder.
The configuration files can be found at the root dir: eslintrc.json
and .prettierrc
We are using Material UI. Learn more here https://mui.com/getting-started/learn/.
To launch storybook locally, just run
npm run storybook
-
Add/Edit environment variables
-
NEXT_PUBLIC_SNIPCART_ORDER_VALIDATION_BASE_URL - This needs to point to an exposed url address that snipcart can call for order validation. This url will also need to be added to the snipcart trusted Domain list on the Snipcart site. this is available under the Store Configurations > Domains & Urls.
Local Environment - To setup an exposed url on your local dev env. You can use localtunnel. Then add the generated url to Snipcart trusted domain list.
npm install -g localtunnel lt --port 3000
Staging Environment - The url has already been added to snipcart so the base url just needs to pont to the stage url
Production Environment - Snipcart will use the default domain defined in Snipcart so NO URL is needed
-
NEXT_PUBLIC_SNIPCART_JS_DATA_API_KEY - Add the secret key from Snipcart
-
-
How its works
When the items get added to the cart an order validation url gets included. This url is then used by Snipcart to call our api endpoint defined in the pages/api directory. The endpoint then process a the rquet and returns a JSON to validate the item exists on our site.
Adding this a reference for future use.
Finally, override your next.config.js to run this script as part of the build process.
module.exports = {
webpack: (config, { isServer }) => {
if (isServer) {
require('./scripts/generate-sitemap');
}
return config;
}
};