Web UI for the Portfolio project
This is a Next.js project bootstrapped with create-next-app.
It communicates with backend API (AWS Lambda functions).
Call yarn dev.
Open http://localhost:3000 with your browser to see the result.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Call yarn dev to start the local application.
Call yarn test to run Cypress and Jest tests.
Call yarn test:unit to run Jest tests only.
Call yarn test:ui:run to run Cypress tests only.
Private configuration is stored in .env.local file like:
API_URL=http://localhost:5000
a_AWS_REGION=eu-central-1
a_AWS_API_ID=***
a_AWS_API_STAGE=***
a_AWS_KEY_ID=***
a_AWS_KEY_SECRET=***API_URL: the root endpoint for the Server API.
localhost:5000 is used to point to local development server,
if commented out or left empty, the root endpoint (AWS API Gateway URL) will be calculated using the other AWS variables.
These values are loaded by Next.js within process.env.AAA.
The "a_" in the names is a convention to avoid conflicts with the Next.js system variables.
Refs:
- https://vercel.com/docs/concepts/next.js/overview#adding-secrets
- https://nextjs.org/docs/basic-features/environment-variables
variables are prefixed with "a_" because many of them are used by Next.js/Vercel itself.
In production these values are stored in the Vercel project Environment Variables.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Debugging - (server-side, client-side, full-stack)
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
To create a small and clean Docker image I followed the offcial documentation:
https://github.com/vercel/next.js/tree/canary/examples/with-docker
Only the COPY . . was replaced by a precise copy of wanted files to avoid copy unwanted file/folders and replace of node_module.
yarn build will create the code to run in production.
output: 'standalone' is enabled in nextjs.config.js and cause a warning because the feature is experimental.
Next.js detect the locale automatically.
Nextjs locale detectionn
BUT it forces you to define which locales you want to support and a default one.
next.config.js:
module.exports = {
i18n: {
locales:["en-US", "en-GB", "en-UK", "it-IT"],
defaultLocale: "it-IT",
localeDetection: true,
}
}What if I want to support ALL locales?
To generate the locale.js and locale-names.js files I used F#: devops/[generate locale.fsx]("./devops/generate locale.fsx")
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Using "modal" (and other componentthat needs JavaScript) from vanilla bootstrap does not work (it does not show up).
You need to use Modal component from bootstrap package.
When use import {Modal} from "bootstrap" and try to use the Modal component I receive this error: "document is not defined".
(The same error I receive when I try to import bootstrap.js in _app.js or other componnets)
Also using workaround like this it wasn't possible to use Bootstrap:
// https://www.kindacode.com/article/how-to-correctly-use-bootstrap-5-in-next-js/
// Next.js render the app both client side and sever side, so "document" and "window" does not exists.
useEffect &&
useEffect(() => {
import("bootstrap/dist/js/bootstrap")
}, [])So I'm using React-Bootstrap: yarn add react-bootstrap.
(it still need bootstrap for CSS, yarn add bootstrap)
Reference: https://react-bootstrap.github.io/getting-started/introduction/
Good reference: https://react-icons.github.io
I choose Feather https://react-icons.github.io/react-icons/icons?name=fi
yarn add react-icons
import { IconName } from "react-icons/fi"
See CSS README.
I use Cypress and Gherkin.
Gherkin link 1: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor
Gherkin link 2: https://wanago.io/2020/01/13/javascript-testing-cypress-cucumber
In order to use TypeScript for Gherkin I followed the instruction here: https://betterprogramming.pub/migrate-a-cypress-cucumber-project-to-use-typescript-407c612d2f34
Error: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
yarn add jest -D yarn add @types/jest -D yarn add ts-jest -D
jest.config.js
Error: expect(value).toBe(0) // Property 'toBe' does not exist on type 'Assertion'. This (or similar) is due to clash between Jest and Typescript. Maybe a ts.config.json file stored in different places (for cypress) is a solution. In my case I just switched the "jest" and "cypress" types in ts.config.json, putting the jest first, ant it works.
Yarn does not have a "search" functionality. Use npm search or search on the web.
To add a package use yarn add package@version.
yarn help upgrade does not explain if and how a single package can be updated.
yarn upgrade [package] does not work (it does not upgrade the package to the latest, like next 12.0.1 to 12.0.7).
You have to specify the version yourself.
This file can change.
It should be part of the repositories: yarnpkg/yarn#1776
When there are conflicts,
get the latest version from the repository and run yarn install.
In this way it will take the old yarn.lock but it will update the packages changed in the current package.json.
git checkout -- yarn.lock or git checkout origin/main -- yarn.lock if we are merging from master.
yarn install will update the yarn.lock (based on the changes in the current package.json).
- Warning when run
yarn test:ui:open
[0102/180334.258:ERROR:registration_protocol_win.cc(102)] CreateFile: The system cannot find the file specified. (0x2) It does not happen on another project with older versions:
- "next": "11.1.2",
- "react": "17.0.2", Upgrading Cypress from version 9.0.0 to 9.2.0 does not fix the issue.
https://reactdatepicker.com/
No.
You can't load dynamic locale, based on current request locale.
Also if you set locale="en-GB" it renders the date as MM/dd/yyyy !!
Interface is not nice, too simple.
Documentation on localization is not clear and ambiguous.
No No.
It rendered out of the screen, on top of the textbox.
Only 2 locales are available, actually languages, "en" and "fa".
No.
https://reactnicedates.hernansartorio.com
yarn add react-nice-dates date-fns
locale is in the format of "enUS" and needs to be imported in advance
Stick to React 16?
warning " > [email protected]" has unmet peer dependency "prop-types@^15". warning " > [email protected]" has incorrect peer dependency "react@^16". warning " > [email protected]" has incorrect peer dependency "react-dom@^16".