Migrate from Remix to Next.js

mariliasoaresTW commented 1 month ago

User Story As a developer I want to migrate from Remix to Next.js as our development framework So it can be easier to configure

Definition of Done

All aspects of Remix are removed from the app
The app runs on Next.js instead
All libraries and related config are migrated from previous version

Acceptance Criteria Given I clone the repo locally When I need to run the app Then the app builds on the Next.js framework

[x] create branch with current code versions : current_project_version
[x] remove all vite, vitest,remix and express config and related files from current codebase (main branch)
[x] add Next.js changes
[x] install next.js with react and typescript
[x] install RTL with jest
[x] create mkcert for local development
[x] install MUI, Storybook for Next,js
[x] Adjust config.yml for circle ci and Heroku
[x] Adjust prettier and linter config files next.js
[x] Adjust Typescript config file for next.js
[x] Add storyboook theming
- [x] Add MUI theme
[x] add storybook add ons
[x] add storybook autodoc
[x] add sequelize config
[x] Add release-please configuration
[x] Configure jest to use TypeScript and create a jest test
[x] Update storybook to resolve security vulnerability

paul-thompson1 commented 1 month ago

Move project files to remix folder

mkdir ../remix
mv ./* ../remix 
mv ./.* ../remix 
cd ..

Create Next App

https://github.com/vercel/next.js/tree/canary/packages/create-next-app

yarn create next-app iw-complaint-manager

Move remix folder into project

cd iw-complaint-manager
mv ../remix ./

Use HTTPS:

https://github.com/vercel/next.js/discussions/10935#discussioncomment-7055469

Install Dependencies:

Storybook:

https://storybook.js.org/docs/8.0/get-started/nextjs#manual-migration

yarn add --dev @storybook/nextjs
yarn add --dev storybook@latest  
yarn sb init

Material UI:

https://mui.com/material-ui/integrations/nextjs/

yarn add @mui/material-nextjs @emotion/cache

Sequelize:

https://sequelize.org/docs/v6/getting-started/

yarn add --dev sequelize pg pg-hstore

Cypress:

https://nextjs.org/docs/app/building-your-application/testing/cypress

yarn add -D cypress

Jest:

https://nextjs.org/docs/app/building-your-application/testing/jest

yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

faraakhatTW commented 1 month ago

These libraries we are not taking with us for this story: Express.js, Remix, Vitest. For testing we will stick RTL + Jest. Make sure we are creating React+Next.js with Typescript.

faraakhatTW commented 1 month ago

Questions: Should we add jest configuration for storybook for testing purposes ? @justin-c-anthony . Answer: Yes Import aliases and how we want to use it ? Answer: add for all components and important files Finding out about .cjs and .mjs ? mjs is not important, try to stick to .cjs What type we should use in package.json? Type: Module Add sample test for RTL+Jest

paul-thompson1 commented 1 month ago

I don't think we can use module in package.json unless we update to the canary release. Here is the GitHub issue for reference: Next.js uses CommonJS modules, which causes a build error if "type": "module" is used in package.json

arihu1008 commented 1 month ago

Edited circleCI config.yml to adjust persist_workspace and tested with current_project_version branch:

We reverted branches filter back to main so pipeline is only triggered by main branch commits.

paul-thompson1 commented 1 month ago

There is an open pull request for storybook that addresses a patch for the vulnerability we're facing. I'm not sure when it will be merged: Release: Patch 8.1.6 #27427

paul-thompson1 commented 4 weeks ago

Bootstapped sequelize with sequelize-cli package. We also configured seqeulize and modified the circle ci config.yml. All that is left is to do is to modify config.yml back to main and merge the changes in the feature branch.

arihu1008 commented 4 weeks ago

main branch has all the changes we made in current_project_version branch. CircleCI and Heroku both work as intended.

paul-thompson1 commented 4 weeks ago

We added release please configuration to the main branch. All checks successfully passed.

paul-thompson1 commented 4 weeks ago

The patch for the storybook vulnerability has been released. We just need to update Storybook to 8.1.6.

CwoodsTW commented 4 weeks ago

Was working on setting up jest and came across a small bug when using .toBe in the test. "property toBe does not exist on type "assertion"". To fix this we needed to import "import {expect, jest, test} from '@jest/globals'" at the top of the file. I will link further documentation but this looks like a necessity when using certain matches with TS. https://jestjs.io/docs/29.4/expect

Impactworkers / iw-complaint-manager