From d5ab3bc1e233e425b9dd5430adae46f77f2cf8b0 Mon Sep 17 00:00:00 2001 From: Santiago Aragon Date: Tue, 7 Jan 2025 12:35:03 -0600 Subject: [PATCH 1/5] fix: working on migration steps to vite --- .../app/components/concerts/ConcertCard.tsx | 2 +- .../app/components/homepage/ArtistCard.tsx | 2 +- .../app/components/homepage/ConcertCard.tsx | 2 +- .../app/components/search/DatePicker.tsx | 4 +-- templates/ords-remix-jwt-sample/app/root.tsx | 17 ++-------- .../app/routes/private.tsx | 6 ++-- templates/ords-remix-jwt-sample/package.json | 32 +++++++++++-------- .../ords-remix-jwt-sample/postcss.config.mjs | 6 ++++ templates/ords-remix-jwt-sample/tsconfig.json | 1 + .../ords-remix-jwt-sample/vite.config.ts | 28 ++++++++++++++++ 10 files changed, 63 insertions(+), 37 deletions(-) create mode 100644 templates/ords-remix-jwt-sample/postcss.config.mjs create mode 100644 templates/ords-remix-jwt-sample/vite.config.ts diff --git a/templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx b/templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx index 5072dd6..4e13b51 100644 --- a/templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx +++ b/templates/ords-remix-jwt-sample/app/components/concerts/ConcertCard.tsx @@ -88,7 +88,7 @@ function ConcertCard(props: ConcertCardProps) { ) } - +

{concertTitle}

diff --git a/templates/ords-remix-jwt-sample/app/components/homepage/ArtistCard.tsx b/templates/ords-remix-jwt-sample/app/components/homepage/ArtistCard.tsx index 76a60a3..77e2767 100644 --- a/templates/ords-remix-jwt-sample/app/components/homepage/ArtistCard.tsx +++ b/templates/ords-remix-jwt-sample/app/components/homepage/ArtistCard.tsx @@ -40,7 +40,7 @@ function ArtistCard(props: ArtistCardProps) {
- +

{ artist.name }

diff --git a/templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx b/templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx index ed1fa89..e1a8190 100644 --- a/templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx +++ b/templates/ords-remix-jwt-sample/app/components/homepage/ConcertCard.tsx @@ -44,7 +44,7 @@ function ConcertCard(props: ConcertCardProps) {
- +

{`${concert.artist_name} at ${concert.venue_name}, ${concert.city_name}`}

diff --git a/templates/ords-remix-jwt-sample/app/components/search/DatePicker.tsx b/templates/ords-remix-jwt-sample/app/components/search/DatePicker.tsx index 9f8b993..e397493 100644 --- a/templates/ords-remix-jwt-sample/app/components/search/DatePicker.tsx +++ b/templates/ords-remix-jwt-sample/app/components/search/DatePicker.tsx @@ -4,7 +4,8 @@ ** All rights reserved ** Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/ */ -import ReactDatePicker from 'react-datepicker'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css?url'; interface DateRangePickerProps { startDate: null | Date; @@ -22,7 +23,6 @@ function DateRangePicker(props : DateRangePickerProps) { startDate, endDate, handleSetEndDate, handleSetStartDate, } = props; - const DatePicker = ReactDatePicker.default; return (
- @@ -108,7 +104,6 @@ export function ErrorBoundary() : ReactElement { - @@ -117,15 +112,8 @@ export function ErrorBoundary() : ReactElement { return

Unknown Error

; } -export const links: LinksFunction = () => [ - { - rel: 'stylesheet', - href: stylesheet, - }, - { - rel: 'stylesheet', - href: datepicker, - }, +export const links = () => [ + { rel: 'stylesheet', href: stylesheet }, ]; /** @@ -153,7 +141,6 @@ export default function App() : ReactElement {
- diff --git a/templates/ords-remix-jwt-sample/app/routes/private.tsx b/templates/ords-remix-jwt-sample/app/routes/private.tsx index 75bad72..2fe2ab9 100644 --- a/templates/ords-remix-jwt-sample/app/routes/private.tsx +++ b/templates/ords-remix-jwt-sample/app/routes/private.tsx @@ -82,13 +82,13 @@ export default function Screen() : ReactElement {
- { handleTabSelect(Tabs.PROFILE); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.PROFILE ? 'bg-slate-100' : ''}`}> + { handleTabSelect(Tabs.PROFILE); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.PROFILE ? 'bg-slate-100' : ''}`}> Profile - { handleTabSelect(Tabs.FOLLOWED_ARTISTS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.FOLLOWED_ARTISTS ? 'bg-slate-100' : ''}`}> + { handleTabSelect(Tabs.FOLLOWED_ARTISTS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.FOLLOWED_ARTISTS ? 'bg-slate-100' : ''}`}> Followed Artists - { handleTabSelect(Tabs.UPCOMING_SHOWS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.UPCOMING_SHOWS ? 'bg-slate-100' : ''}`}> + { handleTabSelect(Tabs.UPCOMING_SHOWS); }} className={`w-full py-4 text-xl ${selectedTab === Tabs.UPCOMING_SHOWS ? 'bg-slate-100' : ''}`}> Followed Events
diff --git a/templates/ords-remix-jwt-sample/package.json b/templates/ords-remix-jwt-sample/package.json index c688c26..cf86db2 100644 --- a/templates/ords-remix-jwt-sample/package.json +++ b/templates/ords-remix-jwt-sample/package.json @@ -4,7 +4,7 @@ "description": "ORDS sample application", "main": "index.js", "scripts": { - "build": "remix build", + "build": "remix vite:build", "migrate": "node ./ords/migrate.js", "seed": "node ./ords/seed.js", "drop": "node ./ords/drop.js", @@ -14,10 +14,10 @@ "lint:frontend": "eslint ./app --ext .js,.jsx,.ts,.tsx", "lint:backend": "eslint ./ords --ext .js,.ts", "lint": "npm run lint:frontend && npm run lint:backend", - "start": "remix-serve ./build/index.js", + "start": "remix-serve ./build/server/index.js", "typecheck": "tsc", "icons": "npx @svgr/cli --out-dir app/components/icons -- app/assets/icons", - "dev": "remix dev --manual" + "dev": "remix vite:dev" }, "watch": { "icons": { @@ -32,16 +32,15 @@ "license": "UPL-1.0", "type": "module", "dependencies": { - "@auth0/auth0-react": "2.2.4", "@emotion/cache": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@mui/icons-material": "6.0.2", "@mui/material": "6.0.2", - "@remix-run/css-bundle": "2.13.1", - "@remix-run/node": "2.13.1", - "@remix-run/react": "2.13.1", - "@remix-run/serve": "2.13.1", + "@remix-run/dev": "2.15.2", + "@remix-run/node": "2.15.2", + "@remix-run/react": "2.15.2", + "@remix-run/serve": "2.15.2", "dotenv": "^16.4.5", "embla-carousel": "^8.2.0", "embla-carousel-react": "^8.2.0", @@ -49,14 +48,14 @@ "isomorphic-dompurify": "^2.13.0", "material-ui-popup-state": "^5.3.1", "node-fetch": "3.3.2", - "react": "18.3.1", + "react": "18.3.0-canary-01ab35a9a-20240228", "react-datepicker": "7.3.0", - "react-dom": "18.3.1", + "react-dom": "18.3.0-canary-01ab35a9a-20240228", "remix-auth": "3.7.0", - "remix-auth-auth0": "1.10.0" + "remix-auth-auth0": "1.10.0", + "vite": "5.4.11" }, "devDependencies": { - "@remix-run/dev": "2.13.1", "@svgr/cli": "8.1.0", "@svgr/plugin-jsx": "8.1.0", "@svgr/plugin-prettier": "8.1.0", @@ -80,6 +79,11 @@ "eslint-plugin-tsdoc": "0.2.17", "postcss": "8.4.47", "tailwindcss": "3.4.3", - "typescript": "5.1.6" + "typescript": "5.1.6", + "vite-tsconfig-paths": "^5.1.4" + }, + "overrides": { + "react": "18.3.0-canary-01ab35a9a-20240228", + "react-dom": "18.3.0-canary-01ab35a9a-20240228" } -} \ No newline at end of file +} diff --git a/templates/ords-remix-jwt-sample/postcss.config.mjs b/templates/ords-remix-jwt-sample/postcss.config.mjs new file mode 100644 index 0000000..f142a9c --- /dev/null +++ b/templates/ords-remix-jwt-sample/postcss.config.mjs @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + }, + }; + \ No newline at end of file diff --git a/templates/ords-remix-jwt-sample/tsconfig.json b/templates/ords-remix-jwt-sample/tsconfig.json index 0e89ba5..5cd883d 100644 --- a/templates/ords-remix-jwt-sample/tsconfig.json +++ b/templates/ords-remix-jwt-sample/tsconfig.json @@ -6,6 +6,7 @@ "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", + "module": "ESNext", "moduleResolution": "Bundler", "resolveJsonModule": true, "target": "ES2022", diff --git a/templates/ords-remix-jwt-sample/vite.config.ts b/templates/ords-remix-jwt-sample/vite.config.ts new file mode 100644 index 0000000..6e1688c --- /dev/null +++ b/templates/ords-remix-jwt-sample/vite.config.ts @@ -0,0 +1,28 @@ +import { vitePlugin as remix } from '@remix-run/dev'; +import { defineConfig } from 'vite'; +import tsconfigPaths from 'vite-tsconfig-paths'; + +declare module '@remix-run/node' { + // or cloudflare, deno, etc. + interface Future { + v3_singleFetch: true; + } +} + +export default defineConfig({ + ssr: { + noExternal: process.env.NODE_ENV === 'production' ? [/^@mui\//] : [], + }, + plugins: [remix( + { + future: { + unstable_optimizeDeps: true, + v3_fetcherPersist: true, + v3_relativeSplatPath: true, + v3_throwAbortReason: true, + v3_lazyRouteDiscovery: true, + v3_singleFetch: true, + }, + }, + ), tsconfigPaths()], +}); From 724f9cf66f3302e7532c3262df75111ff21f277a Mon Sep 17 00:00:00 2001 From: Santiago Aragon Date: Wed, 8 Jan 2025 12:21:30 -0600 Subject: [PATCH 2/5] fix(deps): downgraded MUI to version 5.16.14 to remove hydration errors --- templates/ords-remix-jwt-sample/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/ords-remix-jwt-sample/package.json b/templates/ords-remix-jwt-sample/package.json index cf86db2..8524ffc 100644 --- a/templates/ords-remix-jwt-sample/package.json +++ b/templates/ords-remix-jwt-sample/package.json @@ -35,8 +35,8 @@ "@emotion/cache": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", - "@mui/icons-material": "6.0.2", - "@mui/material": "6.0.2", + "@mui/icons-material": "5.16.14", + "@mui/material": "5.16.14", "@remix-run/dev": "2.15.2", "@remix-run/node": "2.15.2", "@remix-run/react": "2.15.2", From 0958ecf1997e4bfca0753699d7f6c03fda8fa6d8 Mon Sep 17 00:00:00 2001 From: Santiago Aragon Date: Wed, 8 Jan 2025 12:26:13 -0600 Subject: [PATCH 3/5] fix(deps): added deleted dependencies and defined port 3000 for the vite server --- templates/ords-remix-jwt-sample/package.json | 9 +++------ templates/ords-remix-jwt-sample/vite.config.ts | 4 ++-- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/templates/ords-remix-jwt-sample/package.json b/templates/ords-remix-jwt-sample/package.json index 8524ffc..91a7fa2 100644 --- a/templates/ords-remix-jwt-sample/package.json +++ b/templates/ords-remix-jwt-sample/package.json @@ -32,6 +32,7 @@ "license": "UPL-1.0", "type": "module", "dependencies": { + "@auth0/auth0-react": "2.2.4", "@emotion/cache": "^11.13.0", "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", @@ -48,9 +49,9 @@ "isomorphic-dompurify": "^2.13.0", "material-ui-popup-state": "^5.3.1", "node-fetch": "3.3.2", - "react": "18.3.0-canary-01ab35a9a-20240228", + "react": "18.3.1", "react-datepicker": "7.3.0", - "react-dom": "18.3.0-canary-01ab35a9a-20240228", + "react-dom": "18.3.1", "remix-auth": "3.7.0", "remix-auth-auth0": "1.10.0", "vite": "5.4.11" @@ -81,9 +82,5 @@ "tailwindcss": "3.4.3", "typescript": "5.1.6", "vite-tsconfig-paths": "^5.1.4" - }, - "overrides": { - "react": "18.3.0-canary-01ab35a9a-20240228", - "react-dom": "18.3.0-canary-01ab35a9a-20240228" } } diff --git a/templates/ords-remix-jwt-sample/vite.config.ts b/templates/ords-remix-jwt-sample/vite.config.ts index 6e1688c..7ef792d 100644 --- a/templates/ords-remix-jwt-sample/vite.config.ts +++ b/templates/ords-remix-jwt-sample/vite.config.ts @@ -10,8 +10,8 @@ declare module '@remix-run/node' { } export default defineConfig({ - ssr: { - noExternal: process.env.NODE_ENV === 'production' ? [/^@mui\//] : [], + server: { + port: 3000, }, plugins: [remix( { From 6bad38073a6f551c339e86a281e6d269d1329076 Mon Sep 17 00:00:00 2001 From: Santiago Aragon Date: Wed, 8 Jan 2025 12:28:59 -0600 Subject: [PATCH 4/5] fix(deps): added updates to minor dependencies --- templates/ords-remix-jwt-sample/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/ords-remix-jwt-sample/package.json b/templates/ords-remix-jwt-sample/package.json index 91a7fa2..dc3e698 100644 --- a/templates/ords-remix-jwt-sample/package.json +++ b/templates/ords-remix-jwt-sample/package.json @@ -50,7 +50,7 @@ "material-ui-popup-state": "^5.3.1", "node-fetch": "3.3.2", "react": "18.3.1", - "react-datepicker": "7.3.0", + "react-datepicker": "7.5.0", "react-dom": "18.3.1", "remix-auth": "3.7.0", "remix-auth-auth0": "1.10.0", @@ -76,8 +76,8 @@ "eslint-plugin-jsx-a11y": "6.10.2", "eslint-plugin-react": "7.34.3", "eslint-plugin-react-hooks": "4.6.2", - "eslint-plugin-tailwindcss": "3.17.4", - "eslint-plugin-tsdoc": "0.2.17", + "eslint-plugin-tailwindcss": "3.17.5", + "eslint-plugin-tsdoc": "0.4.0", "postcss": "8.4.47", "tailwindcss": "3.4.3", "typescript": "5.1.6", From 85626428b842b75e4a291caef410a7c77e39df9d Mon Sep 17 00:00:00 2001 From: Santiago Aragon Date: Wed, 8 Jan 2025 15:54:21 -0600 Subject: [PATCH 5/5] fix(docs): updated the bash script showing the terminal output when using Vite --- templates/ords-remix-jwt-sample/README.md | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/templates/ords-remix-jwt-sample/README.md b/templates/ords-remix-jwt-sample/README.md index 68a802c..95eb206 100644 --- a/templates/ords-remix-jwt-sample/README.md +++ b/templates/ords-remix-jwt-sample/README.md @@ -40,7 +40,7 @@ To set up your Auth0 tenant and application follow the steps outlined in [The Au #### 3. configure your `.env` file as it follows -You can create a `.env` file or rename the `.env.example` file to `.env` and use it to fill the following environment variables: +You can create a `.env` file or rename the `.env.example` file to `.env` and use it to fill the following environment variables: ```bash # We refer to some variables as Autonomous Database specific but you can use whichever ORDS URL you want/have as well as the user, as long as this user is capable of creating and REST Enabling other schemas. @@ -180,14 +180,11 @@ Once the server is up you will see the following output on your console: ```bash > ords-remix-jwt-sample@1.0.0 dev -> remix dev --manual +> remix vite:dev - - 💿 remix dev - - info building... - info built (3.1s) -[remix-serve] http://localhost:3000 (http://:3000) + ➜ Local: http://localhost:3000/ + ➜ Network: use --host to expose + ➜ press h + enter to show help ``` Now you can go to `http://localhost:3000` and see the ORDS Concert App in action fell free to explore the Discover Functionalities and don't forget to Enable the Tooltips functionality to learn more about Oracle REST Data Services! @@ -212,4 +209,4 @@ All names, characters, organizations, places, events and portrayals are entirely Copyright (c) 2024 Oracle and/or its affiliates. -Released under the Universal Permissive License v1.0 as shown at https://oss.oracle.com/licenses/upl/. +Released under the Universal Permissive License v1.0 as shown at .