feat: Allow for custom server to participate in bundling (#1504)

feat: updated templates to make use of new compiler defaults
feat: added node polyfills for "neutral" server platforms that are not deno
fix(create-remix): make sure app has required properties before merging
fix(create-remix): add missing dependencies
ci: remove some junk from deployment scripts
chore(create-remix): workers requires a build command
feat: remove extra build step from CF template
fix: made getLoadContext optional for arc handler

Co-authored-by: Logan McAnsh <logan@mcan.sh>

.gitignore

@@ -6,6 +6,7 @@
 node_modules/
 yarn-error.log
 
+/jacob
 /MICHAEL_TODOS.md
 /fixtures/cloudflare
 /fixtures/test

fixtures/gists-app/app/redirects.server.ts

@@ -0,0 +1,11 @@
+import { createCookieSessionStorage } from "remix";
+
+export let sessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: "redirectslogin",
+    path: "/",
+    httpOnly: true,
+    sameSite: true,
+    secure: process.env.NODE_ENV !== "development"
+  }
+});

fixtures/gists-app/app/routes/redirects/login.jsx

@@ -1,20 +1,11 @@
 import {
   redirect,
-  createCookieSessionStorage,
   json,
   Form,
   useLoaderData
 } from "remix";
 
-let sessionStorage = createCookieSessionStorage({
-  cookie: {
-    name: "redirectslogin",
-    path: "/",
-    httpOnly: true,
-    sameSite: true,
-    secure: process.env.NODE_ENV !== "development"
-  }
-});
+import { sessionStorage } from "~/redirects.server";
 
 export let action = async ({ request }) => {
   let session = await sessionStorage.getSession(request.headers.get("Cookie"));

fixtures/gists-app/app/routes/resources/settings.tsx

@@ -3,7 +3,7 @@ import type { LoaderFunction } from "remix";
 import { Form, json, useLoaderData, useTransition } from "remix";
 import { Link } from "remix";
 
-import { defaultStyles, sessionStorage } from "./theme-css";
+import { defaultStyles, sessionStorage } from "~/themes.server";
 
 export let handle = {
   breadcrumb: () => <Link to="/resources">Resources</Link>

fixtures/gists-app/app/routes/resources/theme-css.ts

@@ -1,26 +1,7 @@
 import type { ActionFunction, LoaderFunction } from "remix";
 import { redirect } from "remix";
-import { createCookieSessionStorage } from "remix";
 
-export let sessionStorage = createCookieSessionStorage({
-  cookie: {
-    name: "theme-css",
-    secrets: ["fjdlafjdkla"]
-  }
-});
-
-export let defaultStyles: Record<string, string> = {
-  "--nc-tx-1": "#ffffff",
-  "--nc-tx-2": "#eeeeee",
-  "--nc-bg-1": "#000000",
-  "--nc-bg-2": "#111111",
-  "--nc-bg-3": "#222222",
-  "--nc-lk-1": "#3291FF",
-  "--nc-lk-2": "#0070F3",
-  "--nc-lk-tx": "#FFFFFF",
-  "--nc-ac-1": "#7928CA",
-  "--nc-ac-tx": "#FFFFFF"
-};
+import { defaultStyles, sessionStorage } from "~/themes.server";
 
 export let action: ActionFunction = async ({ request }) => {
   let formData = new URLSearchParams(await request.text());

fixtures/gists-app/app/themes.server.ts

@@ -0,0 +1,21 @@
+import { createCookieSessionStorage } from "remix";
+
+export let sessionStorage = createCookieSessionStorage({
+  cookie: {
+    name: "theme-css",
+    secrets: ["fjdlafjdkla"]
+  }
+});
+
+export let defaultStyles: Record<string, string> = {
+  "--nc-tx-1": "#ffffff",
+  "--nc-tx-2": "#eeeeee",
+  "--nc-bg-1": "#000000",
+  "--nc-bg-2": "#111111",
+  "--nc-bg-3": "#222222",
+  "--nc-lk-1": "#3291FF",
+  "--nc-lk-2": "#0070F3",
+  "--nc-lk-tx": "#FFFFFF",
+  "--nc-ac-1": "#7928CA",
+  "--nc-ac-tx": "#FFFFFF"
+};

fixtures/gists-app/package.json

@@ -9,7 +9,7 @@
     "predev": "yarn run install_remix",
     "dev": "pm2-dev pm2.config.js",
     "prestart": "yarn run install_remix",
-    "start": "node server.js",
+    "start": "node ./build",
     "preroutes": "yarn run install_remix",
     "routes": "node node_modules/@remix-run/dev/cli.js routes"
   },

fixtures/gists-app/remix.config.js

@@ -11,6 +11,7 @@ module.exports = {
   serverBuildDirectory: "./build",
   devServerPort: 8002,
   ignoredRouteFiles: [".*", "blargh.ts"],
+  server: "./server.js",
 
   mdx: async filename => {
     const [rehypeHighlight, remarkToc] = await Promise.all([

fixtures/gists-app/server.js

@@ -58,7 +58,7 @@ if (process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test") {
 app.all(
   "*",
   createRequestHandler({
-    build: require("./build"),
+    build: require("@remix-run/dev/server-build"),
     getLoadContext() {
       return { userId: 4 };
     }

packages/create-remix/index.ts

@@ -65,6 +65,9 @@ async function createApp({ projectDir, lang, server, install }: CreateAppArgs) {
 
   // merge package.jsons
   let appPkg = require(path.join(sharedTemplate, "package.json"));
+  appPkg.scripts = appPkg.scripts || {};
+  appPkg.dependencies = appPkg.dependencies || {};
+  appPkg.devDependencies = appPkg.devDependencies || {};
   let serverPkg = require(path.join(serverTemplate, "package.json"));
   ["dependencies", "devDependencies", "scripts"].forEach(key => {
     Object.assign(appPkg[key], serverPkg[key]);

packages/create-remix/templates/_shared_js/package.json

@@ -3,10 +3,6 @@
   "name": "remix-app-template-js",
   "description": "",
   "license": "",
-  "scripts": {
-    "build": "remix build",
-    "dev": "remix watch"
-  },
   "dependencies": {
     "@remix-run/react": "*",
     "react": "^17.0.2",

packages/create-remix/templates/_shared_js/remix.config.js

@@ -2,9 +2,5 @@
  * @type {import('@remix-run/dev/config').AppConfig}
  */
 module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/build/",
-  serverBuildDirectory: "server/build",
   ignoredRouteFiles: [".*"]
 };

packages/create-remix/templates/_shared_ts/package.json

@@ -3,10 +3,6 @@
   "name": "remix-app-template",
   "description": "",
   "license": "",
-  "scripts": {
-    "build": "remix build",
-    "dev": "remix watch"
-  },
   "dependencies": {
     "@remix-run/react": "*",
     "react": "^17.0.2",

packages/create-remix/templates/arc/gitignore

@@ -1,7 +1,7 @@
 node_modules
 
 /.cache
-/server/build
+/server/index.js
 /public/build
 
 sam.json

packages/create-remix/templates/arc/package.json

@@ -1,11 +1,17 @@
 {
   "scripts": {
     "postinstall": "remix setup node",
-    "build": "remix build",
-    "dev": "remix watch",
-    "start": "arc sandbox"
+    "build": "cross-env NODE_ENV=production remix build",
+    "dev:remix": "cross-env NODE_ENV=development remix watch",
+    "dev:arc": "cross-env NODE_ENV=development arc sandbox",
+    "dev": "cross-env NODE_ENV=development remix build && run-p dev:*",
+    "start": "cross-env NODE_ENV=production arc sandbox"
   },
   "dependencies": {
-    "@remix-run/architect": "*"
+    "@remix-run/architect": "*",
+    "cross-env": "^7.0.3"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5"
   }
 }

packages/create-remix/templates/arc/remix.config.js

@@ -2,10 +2,12 @@
  * @type {import('@remix-run/dev/config').AppConfig}
  */
 module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/_static/build/",
-  serverBuildDirectory: "server/build",
-  devServerPort: 8002,
+  serverBuildTarget: "arc",
+  server: "./server.js",
   ignoredRouteFiles: [".*"]
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "server/index.js",
+  // publicPath: "/_static/build/",
+  // devServerPort: 8002
 };

packages/create-remix/templates/arc/server.js

@@ -0,0 +1,7 @@
+import { createRequestHandler } from "@remix-run/architect";
+import * as build from "@remix-run/dev/server-build";
+
+export const handler = createRequestHandler({
+  build,
+  mode: process.env.NODE_ENV
+});

packages/create-remix/templates/cloudflare-pages/gitignore

@@ -1,5 +1,5 @@
 node_modules
 
 /.cache
-/build
+/functions/[[path]].js
 /public/build

packages/create-remix/templates/cloudflare-pages/package.json

@@ -1,21 +1,19 @@
 {
-  "main": "dist/worker.js",
   "scripts": {
     "postinstall": "remix setup cloudflare-pages",
     "build": "cross-env NODE_ENV=production remix build",
-    "dev:remix": "remix watch",
-    "dev:wrangler": "wrangler pages dev ./public --watch ./build",
-    "dev": "cross-env NODE_ENV=development run-p dev:*",
-    "start": "npm run dev:wrangler"
+    "dev:remix": "cross-env NODE_ENV=development remix watch",
+    "dev:wrangler": "cross-env NODE_ENV=development wrangler pages dev ./public",
+    "dev": "cross-env NODE_ENV=development remix build && run-p dev:*",
+    "start": "cross-env NODE_ENV=production npm run dev:wrangler"
   },
   "dependencies": {
     "@remix-run/cloudflare-pages": "*"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^3.2.0",
     "cross-env": "^7.0.3",
-    "esbuild": "0.13.14",
     "npm-run-all": "^4.1.5",
-    "wrangler": "alpha"
+    "wrangler": "beta"
   }
 }

packages/create-remix/templates/cloudflare-pages/remix.config.js

@@ -2,12 +2,13 @@
  * @type {import('@remix-run/dev/config').AppConfig}
  */
 module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/build/",
-  serverModuleFormat: "esm",
-  serverPlatform: "neutral",
-  serverBuildDirectory: "build",
+  serverBuildTarget: "cloudflare-pages",
+  server: "./server.js",
   devServerBroadcastDelay: 1000,
   ignoredRouteFiles: [".*"]
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "functions/[[path]].js",
+  // publicPath: "/build/",
+  // devServerPort: 8002
 };

packages/create-remix/templates/cloudflare-pages/functions/[[path]].js → packages/create-remix/templates/cloudflare-pages/server.js

@@ -1,10 +1,10 @@
 import { createPagesFunctionHandler } from "@remix-run/cloudflare-pages";
-
-// @ts-ignore
-import * as build from "../build";
+import * as build from "@remix-run/dev/server-build";
 
 const handleRequest = createPagesFunctionHandler({
-  build
+  build,
+  mode: process.env.NODE_ENV,
+  getLoadContext: context => context.env
 });
 
 export function onRequest(context) {

packages/create-remix/templates/cloudflare-workers/package.json

@@ -1,20 +1,21 @@
 {
-  "main": "dist/worker.js",
+  "main": "build/index.js",
   "scripts": {
     "postinstall": "remix setup cloudflare-workers",
-    "build:worker": "esbuild --define:process.env.NODE_ENV='\"production\"' --minify --bundle --sourcemap --outdir=dist ./worker",
-    "build": "remix build",
-    "dev": "remix watch",
-    "dev:worker": "esbuild --define:process.env.NODE_ENV='\"development\"' --bundle --sourcemap --outdir=dist ./worker",
-    "start": "miniflare --build-command \"npm run dev:worker\" --watch",
+    "build": "cross-env NODE_ENV=production remix build",
+    "dev:remix": "cross-env NODE_ENV=development remix watch",
+    "dev:miniflare": "cross-env NODE_ENV=development miniflare ./build/index.js --watch",
+    "dev": "cross-env NODE_ENV=development remix build && run-p dev:*",
+    "start": "cross-env NODE_ENV=production miniflare ./build/index.js",
     "deploy": "npm run build && wrangler publish"
   },
   "dependencies": {
     "@remix-run/cloudflare-workers": "*"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^2.2.2",
-    "esbuild": "0.13.14",
-    "miniflare": "2.0.0-next.3"
+    "cross-env": "^7.0.3",
+    "miniflare": "^2.1.0",
+    "npm-run-all": "^4.1.5"
   }
 }

packages/create-remix/templates/cloudflare-workers/remix.config.js

@@ -2,12 +2,13 @@
  * @type {import('@remix-run/dev/config').AppConfig}
  */
 module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/build/",
-  serverModuleFormat: "esm",
-  serverPlatform: "neutral",
-  serverBuildDirectory: "build",
+  serverBuildTarget: "cloudflare-workers",
+  server: "./server.js",
   devServerBroadcastDelay: 1000,
   ignoredRouteFiles: [".*"]
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+  // devServerPort: 8002
 };

packages/create-remix/templates/cloudflare-workers/server.js

@@ -0,0 +1,7 @@
+import { createEventHandler } from "@remix-run/cloudflare-workers";
+import * as build from "@remix-run/dev/server-build";
+
+addEventListener(
+  "fetch",
+  createEventHandler({ build, mode: process.env.NODE_ENV })
+);

packages/create-remix/templates/cloudflare-workers/wrangler.toml

@@ -11,8 +11,7 @@ bucket = "./public"
 entry-point = "."
 
 [build]
-command = "npm run build:worker"
-watch_dir = "build/index.js"
+command = "npm run build"
 
 [build.upload]
 format="service-worker"

packages/create-remix/templates/express/package.json

@@ -1,15 +1,21 @@
 {
   "scripts": {
     "postinstall": "remix setup node",
-    "dev": "remix watch",
-    "start": "cross-env NODE_ENV=production node server/index.js",
-    "start:dev": "cross-env NODE_ENV=development node server/index.js"
+    "build": "cross-env NODE_ENV=production remix build",
+    "dev": "cross-env NODE_ENV=development remix build && run-p dev:*",
+    "dev:remix": "cross-env NODE_ENV=development remix watch",
+    "dev:node": "cross-env NODE_ENV=development nodemon ./build/index.js",
+    "start": "cross-env NODE_ENV=production node ./build/index.js"
   },
   "dependencies": {
     "@remix-run/express": "*",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "express": "^4.17.1",
-    "morgan": "^1.10.0"
+    "morgan": "^1.10.0",
+    "npm-run-all": "^4.1.5"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.15"
   }
 }