OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

[WIP] Run cra-to-next codemod to be on Nextjs

Browse source 
I'm interested in ejecting from Vercel, so I'm trying to get off their proprietary-ish create-react-app + Vercel API thing, and onto Nextjs, which is very similar in shape, but more portable.

I had to disable `craCompat` in `next.config.js` to stop us from crashing on their webpack config, see https://github.com/vercel/next.js/discussions/25858#discussioncomment-1573822

The frontend seems to work at a basic level, but network requests fail, and images don't seem to be working. I'll work on those next!

Note that this commit was forced through despite failing lint checks. We'll need to fix that up too!

Also, after the codemod, I moved `src/pages` to the more canonical location `pages`. Lint tooling seemed surprised to not find a `pages` directory, and I didn't see a config that was making it work correctly in the other location, so I figured it's that Next is willing to check `pages` or `src/pages`? But this is more canonical so yeah!
This commit is contained in:
Emi Matchu 2021-11-01 21:48:09 -07:00
parent 12d525e3ab
commit 567e333f9e
11 changed files with 1494 additions and 9125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.eslintrc.json Normal file
View file

@ -0,0 +1,20 @@
{
"extends": "next/core-web-vitals",
"rules": {
"no-console": [
"warn",
{
"allow": ["debug", "info", "warn", "error"]
}
],
"import/first": "off",
"import/no-webpack-loader-syntax": "off",
"no-unused-vars": [
"warn",
{
"varsIgnorePattern": "^unused",
"argsIgnorePattern": "^_+$|^e$"
}
]
}
}

8
.gitignore vendored
View file

@ -23,3 +23,11 @@ yarn-debug.log*
yarn-error.log*
.vercel
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# next.js
/.next/
/out/
*.pem
# debug
# local env files
# vercel

6
next-env.d.ts vendored Normal file
View file

@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

8
next.config.js Normal file
View file

@ -0,0 +1,8 @@
module.exports = {
env: {
PUBLIC_URL: "",
},
eslint: {
dirs: ["src"],
},
};

50
package.json
View file

@ -41,6 +41,7 @@
"jwks-rsa": "^1.9.0",
"lru-cache": "^6.0.0",
"mysql2": "^2.1.0",
"next": "12.0.2",
"node-fetch": "^2.6.0",
"playwright-core": "^1.14.0",
"react": "^17.0.1",
@ -49,23 +50,22 @@
"react-icons": "^4.2.0",
"react-router-dom": "^5.1.2",
"react-router-hash-link": "^2.4.3",
"react-scripts": "^4.0.1",
"react-transition-group": "^4.3.0",
"react-virtualized": "^9.22.3",
"simple-markdown": "^0.7.2",
"tweenjs": "^1.0.2",
"typescript": "^4.1.3",
"typescript": "^4.4.4",
"xmlrpc": "^1.3.2"
},
"scripts": {
"prepare": "husky install",
"start": "TS_NODE_COMPILER=typescript-cached-transpile vercel dev",
"dev": "yarn build-cached-data && REACT_APP_IMPRESS_LOG_IN_AS=$IMPRESS_LOG_IN_AS react-scripts start",
"build": "yarn build-cached-data && react-scripts build",
"start": "TS_NODE_COMPILER=typescript-cached-transpile next start",
"dev": "yarn build-cached-data && REACT_APP_IMPRESS_LOG_IN_AS=$IMPRESS_LOG_IN_AS TS_NODE_COMPILER=typescript-cached-transpile next dev",
"build": "yarn build-cached-data && next build",
"vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/",
"test": "react-scripts test --env=jsdom",
"test": "jest test --env=jsdom",
"lint": "next lint",
"cypress": "cypress open",
"eject": "react-scripts eject",
"mysql": "mysql --host=impress.openneo.net --user=$(dotenv -p IMPRESS_MYSQL_USER) --password=$(dotenv -p IMPRESS_MYSQL_PASSWORD) --database=openneo_impress",
"mysql-dev": "mysql --host=localhost --user=impress_2020_dev --password=impress_2020_dev --database=impress_2020_dev",
"mysql-admin": "mysql --host=impress.openneo.net --user=matchu --password --database=openneo_impress",
@ -78,38 +78,9 @@
"delete-user": "ts-node --compiler=typescript-cached-transpile --transpile-only -r dotenv/config scripts/delete-user.js",
"export-users-to-auth0": "ts-node --compiler=typescript-cached-transpile --transpile-only -r dotenv/config scripts/export-users-to-auth0.js"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
],
"rules": {
"no-console": [
"warn",
{
"allow": [
"debug",
"info",
"warn",
"error"
]
}
],
"import/first": "off",
"import/no-webpack-loader-syntax": "off",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{
"varsIgnorePattern": "^unused",
"argsIgnorePattern": "^_+$|^e$"
}
]
}
},
"lint-staged": {
"*.{js,ts,tsx}": [
"eslint --max-warnings=0 --fix"
"next lint --max-warnings=0 --fix"
]
},
"browserslist": {
@ -132,6 +103,8 @@
"cypress-plugin-snapshots": "^1.4.4",
"dotenv-cli": "^3.1.0",
"es6-promise-pool": "^2.5.0",
"eslint": "<8.0.0",
"eslint-config-next": "12.0.2",
"eslint-plugin-cypress": "^2.11.2",
"husky": "^6.0.0",
"imports-loader": "^1.2.0",
@ -143,7 +116,6 @@
"react-is": "^16.13.1",
"ts-node": "^9.1.1",
"typescript-cached-transpile": "^0.0.6",
"typescript-eslint": "^0.0.1-alpha.0",
"vercel": "^21.2.3"
"typescript-eslint": "^0.0.1-alpha.0"
}
}

15
pages/[[...slug]].tsx Normal file
View file

@ -0,0 +1,15 @@
// import NextIndexWrapper from '../src'
// next/dynamic is used to prevent breaking incompatibilities
// with SSR from window.SOME_VAR usage, if this is not used
// next/dynamic can be removed to take advantage of SSR/prerendering
import dynamic from "next/dynamic";
// try changing "ssr" to true below to test for incompatibilities, if
// no errors occur the above static import can be used instead and the
// below removed
const NextIndexWrapper = dynamic(() => import("../src"), { ssr: false });
export default function Page(props) {
return <NextIndexWrapper {...props} />;
}

14
pages/_app.tsx Normal file
View file

@ -0,0 +1,14 @@
import Head from 'next/head'
export default function MyApp({ Component, pageProps}) {
return (
<>
<Head>
<title>Dress to Impress</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</>
)
}

92
public/index.html → pages/_document.tsx
View file

@ -1,28 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="%PUBLIC_URL%/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="%PUBLIC_URL%/favicon-16x16.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="%PUBLIC_URL%/apple-touch-icon.png"
/>
<title>Dress to Impress</title>
<style type="text/css">
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<link rel="icon" type="image/png" sizes="32x32" href={`${process.env.PUBLIC_URL}/favicon-32x32.png`} />
<link rel="icon" type="image/png" sizes="16x16" href={`${process.env.PUBLIC_URL}/favicon-16x16.png`} />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" sizes="180x180" href={`${process.env.PUBLIC_URL}/apple-touch-icon.png`} />
<style type="text/css" dangerouslySetInnerHTML={{ __html: `
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
font-family: "Delicious";
@ -37,35 +25,11 @@
font-weight: 800 1000;
src: url(/fonts/Delicious-Heavy.otf);
}
</style>
<script
async
defer
data-domain="impress-2020.openneo.net"
src="https://plausible.io/js/plausible.js"
></script>
<link
rel="preload"
href="/fonts/Delicious-Heavy.otf"
type="font/otf"
as="font"
crossorigin
/>
<link
rel="preload"
href="/fonts/Delicious-Bold.otf"
type="font/otf"
as="font"
crossorigin
/>
</head>
<body>
<!--
✨ Hi!! Writing a user script? Our CSS class names aren't super stable, sorry.
Send me an email at matchu@openneo.net about what you're trying to do,
and I'll see if I can add hooks for you!
-->
<script>
` }} />
<script async="" defer="" data-domain="impress-2020.openneo.net" src="https://plausible.io/js/plausible.js" dangerouslySetInnerHTML={{ __html: `` }} />
<link rel="preload" href="/fonts/Delicious-Heavy.otf" type="font/otf" as="font" crossOrigin="" />
<link rel="preload" href="/fonts/Delicious-Bold.otf" type="font/otf" as="font" crossOrigin="" />
<script dangerouslySetInnerHTML={{ __html: `
// HACK: This is copy-pasted output from Chakra's <ColorModeScript />. It
// initializes our color mode to match the system color mode. The
// component is built for a special Document element like in
@ -98,8 +62,18 @@
root.style.setProperty("--chakra-ui-color-mode", colorMode);
}
})("system");
</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
` }} />
<noscript>You need to enable JavaScript to run this app.</noscript>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument

14
src/index.js
View file

@ -1,9 +1,11 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./app/App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
export default function NextIndexWrapper() {
return (
<React.StrictMode>
<App />
</React.StrictMode>
);
}

14
tsconfig.json
View file

@ -7,11 +7,7 @@
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
@ -19,7 +15,8 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "preserve",
"incremental": true
},
"ts-node": {
"compilerOptions": {
@ -27,7 +24,6 @@
"module": "commonjs"
}
},
"include": [
"src"
]
"include": ["src"],
"exclude": ["node_modules"]
}

10376
yarn.lock
View file

File diff suppressed because it is too large Load diff