netlify / hydrogen-platform Goto Github PK

Hydrogen support for Netlify Edge Functions

TypeScript 65.57% JavaScript 34.43%

hydrogen-platform's Introduction

⚠️ This package is deprecated. See the new template to deploy Hydrogen to Netlify

This package is a Hydrogen platform that allows you to deploy your site to Netlify Edge Functions.

Installation

npm i -D @netlify/hydrogen-platform

Then add the plugin to your Vite config:

// vite.config.js

import { defineConfig } from 'vite'
import hydrogen from '@shopify/hydrogen/plugin'
import netlifyPlugin from '@netlify/hydrogen-platform/plugin'

export default defineConfig({
  plugins: [hydrogen(), netlifyPlugin()],
  //   ...
})

Then when you run shopify hydrogen build it will generate the correct files to deploy to Netlify Edge.

Netlify detects Hydrogen sites, so you should have the correct settings already, but if you need to set them manually you can use the netlify.toml or Netlify UI to do so:

# netlify.toml
[build]
command = "npm run build"
publish = "dist/client"

hydrogen-platform's People

Contributors

Stargazers

Watchers

Forkers

cavellblood vitaliyr rodsotdia

hydrogen-platform's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

chore(deps): update dependency postcss to v8.4.31 [security]
chore(deps): update dependency vite to v2.9.16 [security]

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions

.github/workflows/add-to-project.yml

tibdex/github-app-token v1.9.0@32691ba7c9e7063bd457bd8f2a5703138591fa58

actions/add-to-project v0.5.0

.github/workflows/labeller.yml

netlify/pr-labeler-action v1.1.0

.github/workflows/pre-release.yml

actions/checkout v3

actions/setup-node v3

.github/workflows/release-please.yml

navikt/github-app-token-generator a3831f44404199df32d8f39f7c0ad9bb8fa18b1c

GoogleCloudPlatform/release-please-action v3

actions/checkout v3

actions/setup-node v3

.github/workflows/update-demo-sites.yml

actions/checkout v3

actions/setup-node v3

peter-evans/create-pull-request v4.2.4

npm

demos/demo-store/package.json

@headlessui/react ^1.7.0

@shopify/hydrogen ^1.4.3

clsx ^1.1.1

graphql-tag ^2.12.6

react ^18.2.0

react-dom ^18.2.0

react-use ^17.4.0

typographic-base ^1.0.4

@shopify/cli 3.15.0

@shopify/cli-hydrogen 3.15.0

@shopify/prettier-config ^1.1.2

@tailwindcss/forms ^0.5.2

@tailwindcss/typography ^0.5.2

@types/react ^18.0.14

eslint ^8.18.0

eslint-plugin-hydrogen ^0.12.2

playwright ^1.22.2

postcss ^8.4.14

postcss-import ^14.1.0

postcss-preset-env ^7.6.0

prettier ^2.3.2

tailwindcss ^3.0.24

typescript ^4.7.2

vite ^2.9.13

vitest ^0.15.2

node >=16.14.0

demos/hello-world/package.json

@shopify/hydrogen ^1.4.3

react ^18.2.0

react-dom ^18.2.0

@shopify/cli 3.15.0

@shopify/cli-hydrogen 3.15.0

@types/react ^18.0.9

typescript ^4.7.2

vite ^2.9.13

node >=16.14.0

package.json

execa ^6.1.0

npm-run-all ^4.1.5

rimraf ^5.0.0

tsup ^6.0.0

typescript ^5.0.0

@shopify/hydrogen ^1.0.0

packages/platform/package.json

@netlify/vite-plugin-netlify-edge ^1.1.3

@shopify/hydrogen ^1.2.0

@types/node ^17.0.23

npm-run-all ^4.1.5

rimraf ^5.0.0

tsup ^6.0.0

typescript ^5.0.0

vite ^2.9.0

vite ^2.9.0

Check this box to trigger a request for Renovate to run again on this repository

Support for hydrogen/remix

Is there any plan to support the new shopify hyrdogen/remix version ?

Netlify build throws error

When I try to build using netlify build I get the following error:

[vite]: Rollup failed to resolve import "__SERVER_ENTRY__" from "node_modules/@netlify/hydrogen-platform/dist/handler.mjs".
    This is most likely unintended because it can break your application at runtime.
    If you do want to externalize this module explicitly add it to
    `build.rollupOptions.external`

Any suggestion to effectively deploy manually a Hydrogen app to Netlify?

[BUGS] File shopify.config doesn't exist in the latest hydrogen.

In the latest version of hydrogen - 0.24.0 - the file shopify.config doesn't exist.

- import shopifyConfig from './shopify.config'
+ import shopifyConfig from './hydrogen.config'

Also, : is missing at "build" "npm run build:client && npm run build:ssr".

- "build" "npm run build:client && npm run build:ssr"
+ "build": "npm run build:client && npm run build:ssr"

Netlify "This edge function has crashed" on page reload of Hydrogen store

A Shopify Hydrogen store is deployed on Netlify and sometimes it crashes with the error "This edge function has crashed".

Support is saying this is something with your handler/plugin which you using and that is @netlify/hydrogen-platform/plugin in my vite.config.js

Below is the screenshot from the logs:

Any help or guide would be appreciated. Thank you!

Netlify redirects are not working when using the plugin

When I include the plugin inside of the vite.config.js file, no redirects are working anymore. Unfortunately it does not matter if I place a _redirects file in the public folder or place the redirects inside of the netlify.toml configuration file – the edge handler completely ignores those redirects.

Hydrogen v17 not supported?

I've tested hydrogen v13 (from the sample repository) and it is working fine.
I've tried deploying hydrogen v17 (created new repo).

Build was successful, but it has issues here:

https://master--curious-cupcake-165d0d.netlify.app/

index.html loaded fine, but most JS files are 404 or 503.

Any recommendations to fix that?
I suppose I don't have access to the log files, so I don't know what happens.

Thanks.

Requests for custom font files are handled by Edge Function

I deployed a Hydrogen site to Netlify, but I noticed that while most static assets (images, JS, and CSS files) are getting served directly from the CDN, font files are getting routed through the edge function. The edge function is then serving the root index.html instead of the respective font file, which prevents the site from rendering the custom font. Here's a screenshot of my edge logs:

Static assets don't get routed through the edge function, but font files do.

For further context, I have my font files in a public/fonts directory. When running npm run build locally, I see that the font files correctly get copied into the dist/client/fonts directory.

Thanks for the great work on this, it's been otherwise a simple, easy process to get the site up and running!

Update to match Hydrogen's new platform API

Hydrogen has a new, simplified API for adding third-party platforms. When it is included in a release, we should update this to use the API. This should still work as-is, but it would be better to use the simpler API.

Site stopped rendering on Netlify after Hydrogen V2 Remix upgrade

We upgraded our working hydrogen site on netlify to the latest Hydrogen based on Remix "@shopify/hydrogen": "^2023.1.4", and the site stopped rendering with page not found. It builds fine but every page is not found even though it works fine locally. Is there some changes needed in the plugin after the latest hydrogen remix upgrade?

Provide cache object to Hydrogen

I'm not very familiar with Deno and its platform-as-a-service features but, if possible, it would be great if we can provide a cache in the handler like we do in our Oxygen handler.
We use this to cache subrequests and full page SSR.

Site never loads when use Oxygen globally outside of some function

Hey!

When I'm using Oxygen globally outside of some function, site will never load and eventually connection truncated with 502 status code.

Example:

// useContentfulQuery.ts

// WRONG! Don't use Oxygen on the root level, it works in preview mode
// but fails in the Netlify Edge
const SPACE_ID = Oxygen.env.CONTENTFUL_SPACE_ID;
const ACCESS_TOKEN = Oxygen.env.CONTENTFUL_PREVIEW_TOKEN;

export const useContentfulQuery = () => {
  // CORRECT
  // Use Oxygen within some function
  const SPACE_ID = Oxygen.env.CONTENTFUL_SPACE_ID;
  const ACCESS_TOKEN = Oxygen.env.CONTENTFUL_PREVIEW_TOKEN;
};

If I'm using Oxygen where "wrong" written - site never loads and neither any logs entries on Netlify's Edge console page.

If I move these lines into useContentfulQuery - site loads & works fine.

Add tests

We need some form of tests added to this, though first we need to investigate which sort of tests would help.

Page Not found Issue after successful deployment on netlify.

I used hydrogen/plugin also updated the vite.config.js in the remix template of hydrogen. Added netlify.toml file.
After successful deployment the page not found error is coming.
Any Solution?