feat: implemented Remix server adapter and runtime for Netlify

.github/workflows/cypress-edge-demo.yml

@@ -0,0 +1,68 @@
+name: Run e2e (Remix Edge Demo)
+on:
+  pull_request:
+    types: [opened, synchronize]
+  push:
+    branches:
+      - main
+jobs:
+  cypress:
+    name: Cypress
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Generate Github token
+        uses: navikt/github-app-token-generator@v1
+        id: get-token
+        with:
+          private-key: ${{ secrets.TOKENS_PRIVATE_KEY }}
+          app-id: ${{ secrets.TOKENS_APP_ID }}
+
+      - name: Checkout @netlify/wait-for-deploy-action
+        uses: actions/checkout@v2
+        with:
+          repository: netlify/wait-for-deploy-action
+          token: ${{ steps.get-token.outputs.token }}
+          path: ./.github/actions/wait-for-netlify-deploy
+
+      - name: Wait for Netlify Deploy
+        id: deploy
+        uses: ./.github/actions/wait-for-netlify-deploy
+        with:
+          site-name: remix-edge
+          timeout: 300
+
+      - name: Deploy successful
+        if: ${{ steps.deploy.outputs.origin-url }}
+        run: echo ${{ steps.deploy.outputs.origin-url }}
+
+      - name: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - run: npm install
+
+      - name: Cypress run
+        if: ${{ steps.deploy.outputs.origin-url }}
+        id: cypress
+        uses: cypress-io/github-action@v2
+        with:
+          browser: chrome
+          headless: true
+          record: true
+          parallel: true
+          config-file: cypress/config/edge-cypress.config.ts
+          group: 'Remix Edge Demo'
+        env:
+          DEBUG: '@cypress/github-action'
+          CYPRESS_baseUrl: ${{ steps.deploy.outputs.origin-url }}
+          CYPRESS_NETLIFY_CONTEXT: ${{ steps.deploy.outputs.context }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.REMIX_EDGE_CYPRESS_RECORD_KEY }}

.gitignore

@@ -128,3 +128,8 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+build/
+
+# Local Netlify folder
+.netlify

LICENSE

@@ -1,21 +1,14 @@
-MIT License Copyright (c) 2023 Nick Taylor
+MIT License Copyright (c) 2023 Netlify Inc.
 
-Permission is hereby granted, free of
-charge, to any person obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software without
-restriction, including without limitation the rights to use, copy, modify, merge,
-publish, distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to the
-following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice
-(including the next paragraph) shall be included in all copies or substantial
-portions of the Software.
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or
+substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
-ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
-EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
-OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,35 @@
+# Remix Compute for Netlify
+
+The Remix Compute for Netlify packages allows you to deploy your Remix apps to Netlify on the Edge.
+
+This project is not a template for Remix apps. It is a set of packages used by the Netlify Remix template.
+
+The project is a monorepo. Packages are located in the `packages` directory. There are three packages:
+
+- `@netlify/remix-runtime` - The Remix runtime for Netlify on the Edge
+- `@netlify/remix-edge-adapter` - The Remix adapter for Netlify on the Edge
+- `@netlify/remix-edge-demo-site` - A demo site for testing the packages
+
+## Installation
+
+```bash
+npm install
+```
+
+This installs all the dependencies for all the packages and builds the `@netlify/remix-runtime` and
+`@netlify/remix-edge-adapter` packages.
+
+## Development
+
+Run the build watch command to have packages built when they are changed.
+
+```bash
+npm run build:watch
+```
+
+When you're ready to test your changes, you can run the demo site locally.
+
+```bash
+ntl build --offline
+ntl serve
+```

cypress.config.ts

@@ -2,6 +2,8 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
+    baseUrl: 'http://localhost:8888',
+    specPattern: 'cypress/e2e/**/*.spec.ts',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/config/edge-cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/e2e/**/*.spec.ts',
+    projectId: 'k847hv',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+})

cypress/e2e/smoke.spec.ts

@@ -0,0 +1,9 @@
+describe('Smoke Test', () => {
+  it('Should load the demo site', () => {
+    cy.visit('/')
+    cy.findByRole('heading', { name: /Welcome to Remix/i }).should('exist')
+    cy.findByRole('link', { name: /15m Quickstart Blog Tutorial/i }).should('exist')
+    cy.findByRole('link', { name: /Deep Dive Jokes App Tutorial/i }).should('exist')
+    cy.findByRole('link', { name: /Remix Docs/i }).should('exist')
+  })
+})

cypress/support/commands.ts

@@ -1,37 +1,12 @@
 /// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts 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
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('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) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
+import '@testing-library/cypress/add-commands'
+
+// Handles React 18 hydration errors
+// The hydration errors are because Cypress is manipulating the DOM
+// See https://github.com/robipop22/dnb-stack/issues/3#issuecomment-1286112365
+Cypress.on('uncaught:exception', (err) => {
+  // we check if the error is
+  if (err.message.includes('Minified React error #418;') || err.message.includes('Minified React error #423;')) {
+    return false
+  }
+})

netlify.toml

@@ -0,0 +1,3 @@
+[build]
+command = "npm run build:edge-demo"
+publish = "packages/edge-demo-site/public"