feat: main Switched to remix

Browse Source
This commit is contained in:
Nikolaj Frey 2023-06-23 13:59:14 +10:00
parent de5dff4748
commit a6dee3080c
39 changed files with 7657 additions and 22526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/.eslintignore
View File

@ -1 +0,0 @@
node_modules

3
app/.eslintrc.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
};

18
app/.eslintrc.json
View File

@ -1,18 +0,0 @@
{
"extends": ["plugin:@nx/react"],
"root": true,
"ignorePatterns": ["!**/*"],
"plugins": ["@nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:@nx/typescript"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:@nx/javascript"],
"rules": {}
}
]
}

44
app/.gitignore vendored
View File

@ -1,39 +1,11 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
dist
tmp
/out-tsc
# dependencies
node_modules node_modules
# IDEs and editors .cache
/.idea .env
.project .vercel
.classpath .output
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode /build/
.vscode/* /public/build
!.vscode/settings.json /api/index.js
!.vscode/tasks.json /api/index.js.map
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db

3
app/.prettierignore
View File

@ -1,3 +0,0 @@
# Add files here to ignore them from prettier formatting
/dist
/coverage

3
app/.prettierrc
View File

@ -1,3 +0,0 @@
{
"singleQuote": true
}

65
app/README.md
View File

@ -1,61 +1,32 @@
# App # Remix
<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a> This directory is a brief example of a [Remix](https://remix.run/docs) site that can be deployed to Vercel with zero configuration.
✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨ ## Deploy Your Own
## Start the app [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/remix&template=remix)
To start the development server run `nx serve app`. Open your browser and navigate to http://localhost:4200/. Happy coding! _Live Example: https://remix-run-template.vercel.app_
## Generate code You can also deploy using the [Vercel CLI](https://vercel.com/cli):
If you happen to use Nx plugins, you can leverage code generators that might come with it. ```sh
npm i -g vercel
Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available. vercel
Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
## Running tasks
To execute tasks with Nx use the following syntax:
```
nx <target> <project> <...options>
``` ```
You can also run multiple targets: ## Development
``` To run your Remix app locally, make sure your project's local dependencies are installed:
nx run-many -t <target1> <target2>
```sh
npm install
``` ```
..or add `-p` to filter specific projects Afterwards, start the Remix development server like so:
``` ```sh
nx run-many -t <target1> <target2> -p <proj1> <proj2> npm run dev
``` ```
Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks). Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!
## Want better Editor Integration?
Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
## Ready to deploy?
Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
## Set up CI!
Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)
- [Learn more how to setup CI](https://nx.dev/recipes/ci)
## Connect with us!
- [Join the community](https://nx.dev/community)
- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
- [Follow us on Twitter](https://twitter.com/nxdevtools)

34
app/app/root.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { MetaFunction } from "@vercel/remix";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import { Analytics } from "@vercel/analytics/react";
export const meta: MetaFunction = () => ({
charset: "utf-8",
title: "New Remix App",
viewport: "width=device-width,initial-scale=1",
});
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
{/* <LiveReload /> */}
<Analytics />
</body>
</html>
);
}

9
app/app/routes/edge.tsx Normal file
View File

@ -0,0 +1,9 @@
export const config = { runtime: "edge" };
export default function Edge() {
return (
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
<h1>Welcome to Remix@Edge</h1>
</div>
);
}

13
app/app/routes/index.tsx Normal file
View File

@ -0,0 +1,13 @@
export default function Index() {
return (
<>
<div>Thing Time</div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div>
What's up?
</div>
<input style={{ marginLeft: "8px" }}></input>
</div>
</>
);
}

16
app/e2e/.eslintrc.json
View File

@ -1,16 +0,0 @@
{
"extends": ["plugin:cypress/recommended"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:@nx/javascript"],
"rules": {}
},
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
}
],
"plugins": ["@nx"]
}

8
app/e2e/cypress.config.ts
View File

@ -1,8 +0,0 @@
import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
export default defineConfig({
e2e: nxE2EPreset(__dirname, {
bundler: 'vite',
}),
});

33
app/e2e/project.json
View File

@ -1,33 +0,0 @@
{
"name": "e2e",
"$schema": "../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "e2e/src",
"projectType": "application",
"targets": {
"e2e": {
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "e2e/cypress.config.ts",
"devServerTarget": "app:serve:development",
"testingType": "e2e"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve-static"
}
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["e2e/**/*.{js,ts}"]
}
}
},
"tags": [],
"implicitDependencies": ["app"]
}

13
app/e2e/src/e2e/app.cy.ts
View File

@ -1,13 +0,0 @@
import { getGreeting } from '../support/app.po';
describe('app', () => {
beforeEach(() => cy.visit('/'));
it('should display welcome message', () => {
// Custom command example, see `../support/commands.ts` file
cy.login('my-email@something.com', 'myPassword');
// Function helper example, see `../support/app.po.ts` file
getGreeting().contains('Welcome app');
});
});

4
app/e2e/src/fixtures/example.json
View File

@ -1,4 +0,0 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io"
}

1
app/e2e/src/support/app.po.ts
View File

@ -1 +0,0 @@
export const getGreeting = () => cy.get('h1');

33
app/e2e/src/support/commands.ts
View File

@ -1,33 +0,0 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
// eslint-disable-next-line @typescript-eslint/no-namespace
declare namespace Cypress {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable<Subject> {
login(email: string, password: string): void;
}
}
//
// -- This is a parent command --
Cypress.Commands.add('login', (email, password) => {
console.log('Custom command example: Login', email, password);
});
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

17
app/e2e/src/support/e2e.ts
View File

@ -1,17 +0,0 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands';

10
app/e2e/tsconfig.json
View File

@ -1,10 +0,0 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"sourceMap": false,
"outDir": "../dist/out-tsc",
"allowJs": true,
"types": ["cypress", "node"]
},
"include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
}

16
app/index.html
View File

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>App</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

78
app/nx.json
View File

@ -1,78 +0,0 @@
{
"$schema": "./node_modules/nx/schemas/nx-schema.json",
"tasksRunnerOptions": {
"default": {
"runner": "nx-cloud",
"options": {
"cacheableOperations": [
"build",
"lint",
"test",
"e2e"
],
"accessToken": "OTUxODQ2ZmMtMzhjZC00MjgwLWFkYTUtYTk5MTAyNDRkOTljfHJlYWQtd3JpdGU="
}
}
},
"targetDefaults": {
"build": {
"dependsOn": [
"^build"
],
"inputs": [
"production",
"^production"
]
},
"e2e": {
"inputs": [
"default",
"^production"
]
},
"test": {
"inputs": [
"default",
"^production"
]
},
"lint": {
"inputs": [
"default",
"{workspaceRoot}/.eslintrc.json",
"{workspaceRoot}/.eslintignore"
]
}
},
"namedInputs": {
"default": [
"{projectRoot}/**/*",
"sharedGlobals"
],
"production": [
"default",
"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
"!{projectRoot}/tsconfig.spec.json",
"!{projectRoot}/.eslintrc.json"
],
"sharedGlobals": []
},
"generators": {
"@nx/react": {
"application": {
"style": "css",
"linter": "eslint",
"bundler": "vite",
"babel": true
},
"component": {
"style": "css"
},
"library": {
"style": "css",
"linter": "eslint"
}
}
},
"defaultProject": "app"
}

21894
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

69
app/package.json
View File

@ -1,54 +1,29 @@
{ {
"name": "@app/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "nx serve",
"dev": "yarn start",
"build": "nx build",
"test": "nx test"
},
"private": true, "private": true,
"sideEffects": false,
"scripts": {
"build": "remix build",
"dev": "remix dev"
},
"dependencies": { "dependencies": {
"@swc/helpers": "~0.5.0", "@remix-run/node": "^1.15.0",
"react": "18.2.0", "@remix-run/react": "^1.15.0",
"react-dom": "18.2.0" "@remix-run/serve": "^1.15.0",
"@vercel/analytics": "^0.1.11",
"@vercel/remix": "^1.15.0",
"isbot": "latest",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@nx/cypress": "16.3.2", "@remix-run/dev": "^1.15.0",
"@nx/eslint-plugin": "16.3.2", "@remix-run/eslint-config": "^1.15.0",
"@nx/js": "16.3.2", "@types/react": "^18.0.25",
"@nx/linter": "16.3.2", "@types/react-dom": "^18.0.11",
"@nx/react": "16.3.2", "eslint": "^8.28.0",
"@nx/vite": "16.3.2", "typescript": "^4.9.3"
"@nx/workspace": "16.3.2", },
"@swc/cli": "~0.1.62", "engines": {
"@swc/core": "~1.3.51", "node": ">=14"
"@testing-library/react": "14.0.0",
"@types/node": "18.14.2",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"@vitejs/plugin-react": "^3.0.0",
"@vitest/coverage-c8": "^0.31.0",
"@vitest/ui": "^0.31.0",
"cypress": "^12.11.0",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"jsdom": "~20.0.3",
"nx": "16.3.2",
"nx-cloud": "latest",
"prettier": "^2.6.2",
"typescript": "~5.0.2",
"vite": "^4.3.4",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.0.2",
"vitest": "^0.31.0"
} }
} }

7506
app/pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

78
app/project.json
View File

@ -1,78 +0,0 @@
{
"name": "app",
"$schema": "node_modules/nx/schemas/project-schema.json",
"sourceRoot": "./src",
"projectType": "application",
"targets": {
"build": {
"executor": "@nx/vite:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/app"
},
"configurations": {
"development": {
"mode": "development"
},
"production": {
"mode": "production"
}
}
},
"serve": {
"executor": "@nx/vite:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "app:build"
},
"configurations": {
"development": {
"buildTarget": "app:build:development",
"hmr": true
},
"production": {
"buildTarget": "app:build:production",
"hmr": false
}
}
},
"preview": {
"executor": "@nx/vite:preview-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "app:build"
},
"configurations": {
"development": {
"buildTarget": "app:build:development"
},
"production": {
"buildTarget": "app:build:production"
}
}
},
"test": {
"executor": "@nx/vite:test",
"outputs": ["coverage/app"],
"options": {
"passWithNoTests": true,
"reportsDirectory": "coverage/app"
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["./src/**/*.{ts,tsx,js,jsx}"]
}
},
"serve-static": {
"executor": "@nx/web:file-server",
"options": {
"buildTarget": "app:build"
}
}
},
"tags": []
}

BIN
app/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 17 KiB

14
app/remix.config.js Normal file
View File

@ -0,0 +1,14 @@
/**
* @type {import('@remix-run/dev').AppConfig}
*/
module.exports = {
ignoredRouteFiles: ['**/.*'],
future: {
unstable_dev: true,
appServerPort: 3999
}
// appDirectory: "app",
// assetsBuildDirectory: "public/build",
// serverBuildPath: "build/index.js",
// publicPath: "/build/",
}

2
app/remix.env.d.ts vendored Normal file
View File

@ -0,0 +1,2 @@
/// <reference types="@remix-run/dev" />
/// <reference types="@vercel/remix" />

1
app/src/app/app.module.css
View File

@ -1 +0,0 @@
/* Your styles goes here. */

15
app/src/app/app.spec.tsx
View File

@ -1,15 +0,0 @@
import { render } from '@testing-library/react';
import App from './app';
describe('App', () => {
it('should render successfully', () => {
const { baseElement } = render(<App />);
expect(baseElement).toBeTruthy();
});
it('should have a greeting as the title', () => {
const { getByText } = render(<App />);
expect(getByText(/Welcome app/gi)).toBeTruthy();
});
});

10
app/src/app/app.tsx
View File

@ -1,10 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function App() {
return (
<div>
Thing Time
</div>
);
}
export default App;

0
app/src/assets/.gitkeep
View File

13
app/src/main.tsx
View File

@ -1,13 +0,0 @@
import { StrictMode } from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './app/app';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<StrictMode>
<App />
</StrictMode>
);

1
app/src/styles.css
View File

@ -1 +0,0 @@
/* You can add global styles to this file, and also import other style files */

22
app/tsconfig.app.json
View File

@ -1,22 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./dist/out-tsc",
"types": ["node", "vite/client"]
},
"files": [
"./node_modules/@nx/react/typings/cssmodule.d.ts",
"./node_modules/@nx/react/typings/image.d.ts"
],
"exclude": [
"src/**/*.spec.ts",
"src/**/*.test.ts",
"src/**/*.spec.tsx",
"src/**/*.test.tsx",
"src/**/*.spec.js",
"src/**/*.test.js",
"src/**/*.spec.jsx",
"src/**/*.test.jsx"
],
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}

46
app/tsconfig.json
View File

@ -1,36 +1,22 @@
{ {
"include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
"compilerOptions": { "compilerOptions": {
"rootDir": ".", "lib": ["DOM", "DOM.Iterable", "ES2019"],
"sourceMap": true, "isolatedModules": true,
"declaration": false, "esModuleInterop": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"lib": ["es2020", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": ".",
"paths": {},
"jsx": "react-jsx", "jsx": "react-jsx",
"allowJs": false, "moduleResolution": "node",
"esModuleInterop": false, "resolveJsonModule": true,
"allowSyntheticDefaultImports": true, "target": "ES2019",
"strict": true, "strict": true,
"types": ["vite/client", "vitest"] "allowJs": true,
}, "forceConsistentCasingInFileNames": true,
"files": [], "baseUrl": ".",
"include": [], "paths": {
"references": [ "~/*": ["./app/*"]
{
"path": "./tsconfig.app.json"
}, },
{
"path": "./tsconfig.spec.json" // Remix takes care of building everything in `remix build`.
} "noEmit": true
], }
"compileOnSave": false,
"exclude": ["node_modules", "tmp"]
} }

23
app/tsconfig.spec.json
View File

@ -1,23 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
},
"include": [
"vite.config.ts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.test.tsx",
"src/**/*.spec.tsx",
"src/**/*.test.js",
"src/**/*.spec.js",
"src/**/*.test.jsx",
"src/**/*.spec.jsx",
"src/**/*.d.ts"
],
"files": [
"./node_modules/@nx/react/typings/cssmodule.d.ts",
"./node_modules/@nx/react/typings/image.d.ts"
]
}

43
app/vite.config.ts
View File

@ -1,43 +0,0 @@
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsConfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
cacheDir: './node_modules/.vite/app',
server: {
port: 4200,
host: 'localhost',
},
preview: {
port: 4300,
host: 'localhost',
},
plugins: [
react(),
viteTsConfigPaths({
root: './',
}),
],
// Uncomment this if you are using workers.
// worker: {
// plugins: [
// viteTsConfigPaths({
// root: './',
// }),
// ],
// },
test: {
globals: true,
cache: {
dir: './node_modules/.vitest',
},
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
});

24
ecosystem.config.js
View File

@ -2,15 +2,15 @@ module.exports = {
apps: [ apps: [
{ {
script: 'npm run app', script: 'npm run app',
name: "tt-app", name: 'tt',
namespace: "thingtime" namespace: 'thingtime'
}, }
{ // {
script: 'npm run api', // script: 'npm run api',
name: 'tt-api', // name: 'tt-api',
namespace: "thingtime", // namespace: "thingtime",
watch: ['node', 'node/*/node_modules', 'node/**/node_modules', 'node/node_modules'], // watch: ['node', 'node/*/node_modules', 'node/**/node_modules', 'node/node_modules'],
ignore_watch: [], // ignore_watch: [],
}, // },
], ]
}; }