manawiki / repay

Remix + PayloadCMS

Welcome to RePay!

Simple template to get started with Remix and PayloadCMS, without the monorepo messiness!

Development

Copy .env.example to .env and fill the required environment variables.

yarn;
yarn dev

Deployment

First, build your app for production:

yarn build

Then run the app in production mode:

yarn start

This template comes with Github Action for continuous deployment to Fly.io, but it can also be deployed to any host that accepts a docker image.

You can disable the the action by deleting ./github/workflows and fly.toml, or in the Actions Workflows tab on Github.

repay's Issues

APIError: beginTransaction called while no connection to the database exists

Hi, I'm not sure what I'm missing but I can't seem to get the template to work. When running yarn dev and trying to access localhost:3000 I get met with the error:

APIError: beginTransaction called while no connection to the database exists
    at Object.beginTransaction (/home/kwabe007/test/repay/node_modules/@payloadcms/db-mongodb/src/transactions/beginTransaction.ts:14:11)
    at initTransaction (/home/kwabe007/test/repay/node_modules/payload/src/utilities/initTransaction.ts:20:43)
    at find (/home/kwabe007/test/repay/node_modules/payload/src/collections/operations/find.ts:41:47)
    at find (/home/kwabe007/test/repay/node_modules/payload/src/collections/operations/local/find.ts:63:14)
    at BasePayload.find (/home/kwabe007/test/repay/node_modules/payload/src/payload.ts:118:12)
    at loader (/home/kwabe007/test/repay/app/routes/_index.tsx:6:31)
    at Object.callRouteLoaderRR (/home/kwabe007/test/repay/node_modules/@remix-run/server-runtime/dist/data.js:52:22)
    at handler (/home/kwabe007/test/repay/node_modules/@remix-run/server-runtime/dist/routes.js:54:20)
    at runHandler (/home/kwabe007/test/repay/node_modules/@remix-run/router/router.ts:3960:7)
    at callLoaderOrAction (/home/kwabe007/test/repay/node_modules/@remix-run/router/router.ts:4020:22) {
  data: null,
  isOperational: true,
  isPublic: false,
  status: 500
}

These are the steps I took:

• Clone repo
• Install dependencies with yarn;
• Setup a local mongo instance via docker (without authentication).
• Copy .env.example to .env with MONGODB_URL=mongodb://localhost:27017/app and PAYLOAD_SECRET=secret.
• Run yarn dev.

I also double checked that I could reach the mongo server with mongosh mongodb://localhost:27017/app. I can access it without problems. No idea what I'm doing wrong.

Running
Ubuntu 22.04.4 LTS
node 20.11.1
yarn 1.22.21

[ERROR] No loader is configured for ".node" files: node_modules/@swc/core-darwin-arm64/swc.darwin-arm64.node

I'm having trouble using the Payload Local API in RePay. As soon as I call a local API function in a Remix loader, building the app with yarn dev fails:

import payload from "payload";

export const loader = async () => {
  return await payload.find({
    collection: 'posts',
  });
};

=>
✘ [ERROR] No loader is configured for ".node" files: node_modules/@swc/core-darwin-arm64/swc.darwin-arm64.node

    node_modules/@swc/core/binding.js:130:48:
      130 │ ...               nativeBinding = require('@swc/core-darwin-arm64');
          ╵                                           ~~~~~~~~~~~~~~~~~~~~~~~~
[ ... more errors to follow ]

https://discord.com/channels/967097582721572934/1073583175185477683/1074394688611700857

can't run with Remix 2.5.1 or 2.6.0

Hi,
I can't seem to make this template work.
I just cloned it, ran npm install and then npm run dev.
This is the output of the console:

> dev
> node -r ts-node/register --watch-path ./server.ts server.ts

(node:10796) ExperimentalWarning: Watch mode is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Failed running 'server.ts'

I'm on Node v18.16.0
I filled the env variables.

Can you help me figuring out what's wrong?

Remix: overlap of outDir & publicDir caused a warning.

Running yarn build:remix gives the following warning.

(!) The public directory feature may not work correctly. outDir /home/node/public/build and publicDir /home/node/public are not separate folders.

Build error with resource routes

Hi, it seems the build process breaks when a project contains a resource route (A route that does not export a component).

To reproduce:

1. Create a fresh RePay project.
2. Add a resource route that does not export a component:

// myroute.tsx

import { redirect } from "@remix-run/node";

export function loader() {
    return redirect('/');
}

When you now try to run yarn build, you get:

server.ts:71:7 - error TS2769: No overload matches this call.
  Overload 1 of 2, '({ build, getLoadContext, mode, }: { build: ServerBuild | (() => Promise<ServerBuild>); getLoadContext?: GetLoadContextFunction | undefined; mode?: string | undefined; }): RequestHandler', gave the following error.
    Type '(() => Promise<ServerBuild>) | { default: typeof import("/home/kwabe007/test/repay/build/server/index"); assets: { entry: { module: string; imports: string[]; css: never[]; }; routes: { ...; }; url: string; version: string; }; ... 7 more ...; routes: { ...; }; }' is not assignable to type 'ServerBuild | (() => Promise<ServerBuild>)'.
      Type '{ default: typeof import("/home/kwabe007/test/repay/build/server/index"); assets: { entry: { module: string; imports: string[]; css: never[]; }; routes: { root: { id: string; parentId: undefined; path: string; ... 9 more ...; css: string[]; }; "routes/myroute": { ...; }; "routes/_index": { ...; }; }; url: string; ver...' is not assignable to type 'ServerBuild | (() => Promise<ServerBuild>)'.
        Type '{ default: typeof import("/home/kwabe007/test/repay/build/server/index"); assets: { entry: { module: string; imports: string[]; css: never[]; }; routes: { root: { id: string; parentId: undefined; path: string; ... 9 more ...; css: string[]; }; "routes/myroute": { ...; }; "routes/_index": { ...; }; }; url: string; ver...' is not assignable to type 'ServerBuild'.
          Types of property 'routes' are incompatible.
            Type '{ root: { id: string; parentId: undefined; path: string; index: undefined; caseSensitive: undefined; module: Readonly<{ __proto__: null; default: () => any; meta: () => ({ title: string; charSet?: undefined; name?: undefined; content?: undefined; } | { ...; } | { ...; })[]; }>; }; "routes/myroute": { ...; }; "routes...' is not assignable to type 'ServerRouteManifest'.
              Property '"routes/myroute"' is incompatible with index signature.
                Type '{ id: string; parentId: string; path: string; index: undefined; caseSensitive: undefined; module: Readonly<{ __proto__: null; loader: () => TypedResponse<never>; }>; }' is not assignable to type 'Omit<ServerRoute, "children">'.
                  Types of property 'module' are incompatible.
                    Property 'default' is missing in type 'Readonly<{ __proto__: null; loader: () => TypedResponse<never>; }>' but required in type 'ServerRouteModule'.

71       build: vite
         ~~~~~

  node_modules/@remix-run/server-runtime/dist/routeModules.d.ts:199:5
    199     default: any;
            ~~~~~~~
    'default' is declared here.
  env.d.ts:43:5
    43     build: ServerBuild | (() => Promise<ServerBuild>);
           ~~~~~
    The expected type comes from property 'build' which is declared here on type '{ build: ServerBuild | (() => Promise<ServerBuild>); getLoadContext?: GetLoadContextFunction | undefined; mode?: string | undefined; }'


Found 1 error in server.ts:71

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build:server" exited with 2.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If you do however add an empty export:

export default function MyRoute() {
    return <></>;
}

The build process works fine. Resource routes are valid routes in Remix so RePay should support it as well. For now I'll just remember to add an empty component export to my routes but hope to see this fixed :)

Add License

Hi, I assume it's intended for this template to be free to use for most purposes so it would be good to add a license just to make it explicit.

Server no longer restarts from file change

nodemon isn't restarting the server on file changes after commenting out purgeRequireCache.

Manual dev server restart is required to see any changes.

Is there a way to use SCSS in payload custom components while using tailwind in the frontend?

Using @import '~payload/scss' in a .scss file that is being imported (maybe indirectly) in payload.config.ts raises an error:

Error: Can't find stylesheet to import.
    ╷
  1 │ @import "~payload/scss";
    │   

Comments in tsconfig.json cause error on yarn build:payload

When running yarn build specifically yarn build:payload the comments in tsconfig.json are causing the following error.

Error parsing tsconfig.json: SyntaxError: Unexpected token / in JSON at position 79

Update to PayloadCMS v2

Payload's SWC core needs to be updated or keepImportAssertions throws an error

I upgraded both the main package.json but also the one under payload's in the node_modules and that got past the error

PS C:\Users\Owner\Desktop\app_programs\remixEFC\repay> yarn dev
yarn run v1.22.21
$ node -r ts-node/register --watch-path ./server.ts server.ts
(node:7324) ExperimentalWarning: Watch mode is an experimental feature and might change
at any time
(Use node --trace-warnings ... to show where the warning was created)
C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\transpilers\swc.ts:259
throw new Error(
^
Error: @swc/core threw an error when attempting to validate swc compiler options.
You may be using an old version of swc which does not support the options used by ts-node.
Try upgrading to the latest version of swc.
Error message from swc:
Failed to deserialize buffer as swc::config::Options
JSON: {"sourceMaps":true,"module":{"type":"commonjs","noInterop":false,"strictMode":true,"ignoreDynamic":false},"swcrc":false,"jsc":{"parser":{"syntax":"typescript","tsx":false,"dynamicImport":true,"importAssertions":true},"target":"es2022","transform":{"legacyDecorator":true,"react":{"throwIfNamespace":false,"useBuiltins":false,"runtime":"automatic"},"useDefineForClassFields":true},"keepClassNames":true,"experimental":{"keepImportAttributes":true,"emitAssertForImportAttributes":true}}}

Caused by:
unknown field keepImportAttributes, expected one of plugins, keepImportAssertions, cacheRoot, disableBuiltinTransformsForInternalTesting at line 1 column 485
at createVariant (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts at createSwcOptions (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\transpilers\swc.ts:201:25)
at create (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\transpilers\swc.ts:54:41)
at createTranspiler (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\index.ts:784:16)
at createTranspileOnlyGetOutputFunction (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\index.ts:1341:28)
at createFromPreloadedConfig (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\index.ts:1404:34)
at create (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\index.ts:624:10)
at Object.register (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\src\index.ts:591:15)
at Object. (C:\Users\Owner\Desktop\app_programs\remixEFC\repay\node_modules\ts-node\register\index.js:1:16)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
Failed running 'server.ts'

Repo is not working for me

I cloned the repo and yarn install then yarn dev . This error shows up.

Re-add purgeRequireCache

Right now we're using nodemon for the server, which works fine. But for faster server side HMR we should exclude the server from nodemon and re-add it.

Read more about it here: https://github.com/MoSattler/repay/blob/main/server.ts#L93-L97