From 20463ef5f1cd3bcf0cee1bed4ed14f53909a4e75 Mon Sep 17 00:00:00 2001 From: Ciotka Cierpienia Date: Wed, 29 May 2024 13:53:16 +0200 Subject: [PATCH 1/5] used codegen-cli and flotiq-setup, updated readme, updated packages, fixed eslint errors --- .gitignore | 7 +- README.md | 48 +- lib/examples.js | 11 +- lib/sanitize.js | 29 + next.config.js | 10 +- package.json | 52 +- pages/404.js | 11 +- pages/_app.js | 9 +- pages/api/hello.js | 2 +- pages/index.js | 85 +- postcss.config.js | 10 +- tailwind.config.js | 8 +- yarn.lock | 5372 ++++++++++++++++++++++++++++---------------- 13 files changed, 3670 insertions(+), 1984 deletions(-) create mode 100644 lib/sanitize.js diff --git a/.gitignore b/.gitignore index 74b7586..88716bc 100644 --- a/.gitignore +++ b/.gitignore @@ -25,11 +25,8 @@ yarn-debug.log* yarn-error.log* # local env files -.env -.env.local -.env.development.local -.env.test.local -.env.production.local +.env* +!.env.dist # vercel .vercel diff --git a/README.md b/README.md index caef487..d5eb4a6 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Flotiq logo -Next JS starter boilerplate with Flotiq source +Next.js starter boilerplate with Flotiq source =========================== Kick off your project with this hello-world boilerplate. This starter ships with the main Next JS configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. @@ -28,17 +28,16 @@ Check out live demo: [https://flotiq-nextjs-boilerplate.netlify.app](https://flo The next step is to configure our application to know from where it has to fetch the data. - Copy `.env.dist` as `.env.local` + Flotiq provides a tool for automatically populating `.env` files with your Flotiq API keys. ```bash - cp .env.dist .env.local + npx flotiq-setup ``` - - and add api key: - ``` - FLOTIQ_API_KEY=YOUR FLOTIQ API KEY - ``` + After executing this command, a browser window will open with the Flotiq login screen. Upon successful authentication, + the command will automatically generate appropriately filled .env files for you. + + _Note: If there are existing .env files in the project, flotiq-setup may overwrite them._ 4. **Install dependencies** @@ -47,8 +46,30 @@ Check out live demo: [https://flotiq-nextjs-boilerplate.netlify.app](https://flo ```bash yarn install ``` - -5. **Start developing.** + +5. **Flotiq codegen** + + This package simplifies Typescript Fetch API integration for your Flotiq project, tailored to your Flotiq account + data. To build your customized API package, just run this command: + + ```bash + npx flotiq-codegen-ts generate --compiled-js + ``` + + Now, in your project, you can use the `FlotiqApi` class for easy and convenient communication with the Flotiq API. + + ```javascript + import {FlotiqApi} from '../flotiqApi/index'; + + const api = new FlotiqApi(apiKey); + ``` + + Examples of its usage can be found in the `lib/event.js` file of this project or can be explored in the + [flotiq-codegen-ts repository](https://github.com/flotiq/flotiq-codegen-ts) + + _Note: If you make any changes (additions or deletions) to the `content type definitions` in your Flotiq account, you will need to rerun `npx flotiq-codegen-ts generate --compiled-js` command._ + +6. **Start developing.** Navigate into your new site’s directory and start it up. @@ -56,16 +77,19 @@ Check out live demo: [https://flotiq-nextjs-boilerplate.netlify.app](https://flo yarn dev ``` -6. **Open the source code and start editing!** +7. **Open the source code and start editing!** Your site is now running at `http://localhost:3000`! Open the `my-hello-world-starter` directory in your code editor of choice and edit `pages/index.js`. Save your changes and the browser will update in real time! -7. **Manage your content using Flotiq editor** +8. **Manage your content using Flotiq editor** You can now easily manage your content using [Flotiq editor](https://editor.flotiq.com) + _Note: If you are using `FlotiqApi` generated from `flotiq-codegen-ts` remember to rerun `npx flotiq-codegen-ts generate --compiled-js` + command after changes (additions or edits) to the `content type definitions` in your Flotiq_ + ## Deploy Deploy this starter with one click on [Vercel](https://vercel.com/): diff --git a/lib/examples.js b/lib/examples.js index 9a1f6d8..020bd55 100644 --- a/lib/examples.js +++ b/lib/examples.js @@ -1,10 +1,9 @@ import 'dotenv/config'; +import { FlotiqApi } from '../flotiqApi/index'; +// eslint-disable-next-line import/prefer-default-export export async function getExamplesData() { - const apiUrl = process.env.FLOTIQ_API_URL - const apiKey = process.env.FLOTIQ_API_KEY - const res = await fetch( - `${apiUrl}/api/v1/content/example?limit=1&page=1&auth_token=${apiKey}` - ) - return res.json() + const apiKey = process.env.FLOTIQ_API_KEY; + const api = new FlotiqApi(apiKey); + return api.ExampleAPI.list(); } diff --git a/lib/sanitize.js b/lib/sanitize.js new file mode 100644 index 0000000..dd88792 --- /dev/null +++ b/lib/sanitize.js @@ -0,0 +1,29 @@ +/** + * + * This function is used to sanitize the API responses, without it the getStaticProps() + * methods are not working properly as Next tries to serialize values which are possibly + * `undefined` (which results in an error). + * This method inspects an object (or Array) and recursively replaces `undefined` with `null`. + * + * @param {*} obj + * @returns + */ +function replaceUndefinedWithNull(obj) { + if (obj === null || obj === undefined) return null; + if (typeof obj !== 'object') return obj; // Return the value if it is not an object + + // If it's an array, use map to replace undefined in each element + if (Array.isArray(obj)) { + return obj.map(replaceUndefinedWithNull); + } + + // If it's an object, replace undefined with null recursively + return Object.fromEntries( + Object.entries(obj).map(([key, value]) => [ + key, + value === undefined ? null : replaceUndefinedWithNull(value), + ]), + ); +} + +export default replaceUndefinedWithNull; diff --git a/next.config.js b/next.config.js index 189c130..3895ca0 100644 --- a/next.config.js +++ b/next.config.js @@ -1,15 +1,11 @@ const withImages = require("next-images") -const withPlugins = require('next-compose-plugins') +const nextComposePlugins = require('next-compose-plugins'); +const { withPlugins } = nextComposePlugins.extend(() => ({})); const withTM = require('next-transpile-modules')(['flotiq-components-react']) module.exports = withPlugins([ withTM, - [ - withImages, - { - exclude: /\.svg$/ - } - ], + withImages, ], { images: { diff --git a/package.json b/package.json index e52c9f5..773b50a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,10 @@ { "name": "nextjs-starter-boilerplate", "private": true, + "description": "Flotiq NextJS boilerplate starter", + "version": "1.0.0", + "license": "MIT", + "author": "Flotiq team (https://flotiq.com/)", "scripts": { "dev": "next dev", "build": "next build", @@ -9,26 +13,40 @@ }, "dependencies": { "@zeit/next-source-maps": "^0.0.3", - "dotenv": "^16.0.0", - "flotiq-components-react": "^1.0.0", - "highlight.js": "^11.4.0", - "next": "^12.1", + "@typescript-eslint/parser": "^7.7.0", + "dotenv": "^16.4.5", + "flotiq-components-react": "^1.2.2", + "highlight.js": "^11.9.0", + "next": "^14.2.3", "next-compose-plugins": "^2.2.1", - "next-images": "^1.8.4", - "next-runtime-dotenv": "^1.4.0", - "next-transpile-modules": "^9.0.0", + "next-images": "^1.8.5", + "next-runtime-dotenv": "^1.5.1", + "next-transpile-modules": "^10.0.1", "prop-types": "^15.x", - "react": "17.0.2", - "react-dom": "17.0.2", - "webpack": "^5.1.2" + "react": "18.3.1", + "react-dom": "18.3.1", + "webpack": "^5.91.0" }, "devDependencies": { - "@svgr/webpack": "^6.2.1", - "autoprefixer": "^10.4.2", - "eslint": "8.9.0", - "eslint-config-next": "12.0.10", - "postcss": "^8.4.6", - "prettier": "^2.5.1", - "tailwindcss": "^3.0.23" + "@babel/core": "^7.24.6", + "@babel/eslint-parser": "^7.24.6", + "@babel/plugin-syntax-flow": "^7.24.6", + "@babel/plugin-transform-react-jsx": "^7.24.6", + "@babel/preset-react": "^7.24.6", + "@svgr/webpack": "^8.1.0", + "autoprefixer": "^10.4.19", + "eslint": "7.32.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-next": "14.2.3", + "eslint-config-react-app": "^7.0.1", + "eslint-plugin-flowtype": "^8.0.3", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-jsx": "^0.1.0", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-react": "^7.34.1", + "eslint-plugin-react-hooks": "^4.6.0", + "postcss": "^8.4.38", + "prettier": "^3.2.5", + "tailwindcss": "^3.4.3" } } diff --git a/pages/404.js b/pages/404.js index 614b383..8f93b5a 100644 --- a/pages/404.js +++ b/pages/404.js @@ -1,6 +1,7 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Header } from 'flotiq-components-react' +import React from 'react'; +import Head from 'next/head'; +import Image from 'next/image'; +import { Header } from 'flotiq-components-react'; const NotFoundPage = () => (
@@ -17,6 +18,6 @@ const NotFoundPage = () => ( Page not found, sorry
-) +); -export default NotFoundPage +export default NotFoundPage; diff --git a/pages/_app.js b/pages/_app.js index 07a3961..2e1254d 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,6 +1,6 @@ -import '../styles/globals.css' -import Head from 'next/head' -import { React, useEffect } from 'react'; +import '../styles/globals.css'; +import Head from 'next/head'; +import React, { useEffect } from 'react'; import Script from 'next/script'; import { useRouter } from 'next/router'; import * as gtag from '../lib/gtag'; @@ -27,7 +27,6 @@ const MyApp = ({ Component, pageProps }) => { strategy="afterInteractive" src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`} /> - {/* eslint-disable-next-line @next/next/inline-script-id */}