wardpeet / gatsby-plugin-static-site Goto Github PK

Hey all!

I know I haven't been around much but I would like to change this. Any features/optimizations, we're missing that you would like to see? I'm personally thinking of prefetching, ... I'm happy to see what y'all want to see.

For some reason, when using the plugin, the override of @reach/router is not getting bundled by webpack.

This repo gatsby starter + plugin
https://github.com/xavivars/gatsbybug

and it's deployed here and doesn't work:
http://gatsby-bug.s3-website-eu-west-1.amazonaws.com/notworking/page-2/

(you will see a redirect happening)

I can't understand why it works in here

http://gatsby-bug.s3-website-eu-west-1.amazonaws.com/gatsby/page-3/

(source code for this is coming from https://github.com/wardpeet/gatsby-demos/tree/static-asset-prefix )

Updated to the latest version of Gatsby and this plugin and noticed the site stopped working in IE11.

After some sleuthing, I found that removing the static-site plugin fixed the issue.

Live error can be seen @ https://quickbooks.intuit.com/ca.

Image of error:

Where it leads too:

Hello! I came across this plugin after searching through various github and SO posts. I'm a bit unclear on the ideal use case for this, so I wanted to ask the following:

I have a Gatsby site that sits behind another app (say example.com). This other app handles all the routing; if a user goes to example.com/gatsby/page-one, this other app forwards the request to my app (since it has the 'gatsby' prefix), and adds some headers to the request as well. I would like my app to serve different pages based on the value of these headers.

For instance, I recently redesigned my app, and now have two versions of each page generated at build time -- one with the old design, one with the new. If there is a request to my app with a header specifying to use the old design, I want to serve the page 'gatsby/page-one-old-design'. Similarly, if the header says to use the new design, I want to serve 'gatsby/page-one-new-design'. However, I run into a variety of issues when the pagePath of the Gatsby page I serve doesn't match the url in the browser (unwanted redirects, etc).

Is this a valid use case for this plugin? If not, do you have any suggestions on how to accomplish this?

Thanks, and apologies if this is the wrong place to ask!

When I run gatsby develop i get the error

There was an error in your GraphQL query:

The fragment "GatsbyImageSharpFluid" does not exist.

  12 |  * - `gatsby-image`: https://gatsby.dev/gatsby-image
  13 |  * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
  14 |  */
  15 |
  16 | const Image = () => {
  17 |   const data = useStaticQuery(graphql`
  18 |     query {
  19 |       placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
  20 |         childImageSharp {
  21 |           fluid(maxWidth: 300) {
> 22 |             ...GatsbyImageSharpFluid
     |             ^^^^^^^^^^^^^^^^^^^^^^^^
  23 |           }
  24 |         }
  25 |       }
  26 |     }
  27 |   `);
  28 |
  29 |   return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
  30 | };
  31 |
  32 | export default Image;

Did you mean to use "GatsbyContentfulFluid"?

File: node_modules/@wardpeet/gatsby-plugin-static-site/e2e-tests/asset-prefix/src/components/image.js

Based on this gatsby issue I tried added e2e-tests in .npmignore and there is still an error. I just tested by directly adding the file in node_modules folder.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Hello! I've managed to get this plugin working as expected using gatsby build && gastby serve. However, when attempting to test the app in development mode ,gatsby develop, I run into this breaking error:

×
TypeError: Cannot read property 'page' of undefined
children
.cache/root.js:44
  41 | // Resetting `basepath`/`baseuri` keeps current behaviour
  42 | // to not introduce breaking change.
  43 | // Remove this in v3
> 44 | const RouteHandler = props => (
  45 |   <BaseContext.Provider
  46 |     value={{
  47 |       baseuri: `/`,

EnsureResources.render
.cache/ensure-resources.js:63
  60 | }
  61 | // Check if location has changed on a page using internal routing
  62 | // via matchPath configuration.
> 63 | if (
  64 |   this.state.location.key !== nextState.location.key &&
  65 |   nextState.pageResources.page &&
  66 |   (nextState.pageResources.page.matchPath ||


.cache/app.js:40
  37 |  *
  38 |  * Let's warn if we find service workers in development.
  39 |  */
> 40 | if (`serviceWorker` in navigator) {
  41 |   navigator.serviceWorker.getRegistrations().then(registrations => {
  42 |     if (registrations.length > 0)
  43 |       console.warn(
__trace__
node_modules/@bugsnag/browser/dist/bugsnag.js:2211

I believe this user is running into the same error.

Please let me know if I can provide anymore information!

Hi, I just tried this plugin as my page was redirecting after it loaded.

So basically I have gatsby site running from example.s3.aws.com with path prefix gatsby
There is one route for this site example.s3.aws.com/de-DE/summer-dresses

So I configured my proxy (In house proxy named skipper used in my company)

PathSubtree("/clp/:clpSlug")
  -> setPath("/de-DE/${clpSlug}/index.html")
  -> "example.s3.aws.com";

Path("/gatsby/*asset")
  -> setPath("/${asset}")
  -> "example.s3.aws.com";

So now when I try to access the page from mydomain.com/clp/summer-dresses the page loads except one file which the page-data.json
It is looking for the file in the path mydomain.com/gastby/page-data/clp/summer-dresses/page-data.json and fails which makes sense.

Im wondering if this issue is related this issue.
Any help with this would be appreciated

Hi, After I migrate gatsby to v4, I have this warning when running my project.

warn Plugin @wardpeet/gatsby-plugin-static-site is not compatible with your
 gatsby version 4.2.0 - It requires gatsby@^3.0.0

What steps are needed for the plugin to be compatible ?

I have created an example repo to reproduce the issue:
https://github.com/isi-gach/gastby-static/tree/create-react-app

When I do npm run build:gatsby and I go to http://localhost:5000/demo/index.html
the browser URL changes

If I create a create-react-app build instead using npm run build and I go to http://localhost:5000/demo/index.html the URL doesn't change as expected.

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

Datasource	Name	Replacement PR?
npm	gatsby-image
npm	npm-run-all

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency eslint-plugin-cypress to v3
• chore(deps): update dependency execa to v9
• chore(deps): update dependency globby to v14
• chore(deps): update dependency make-dir to v5
• chore(deps): update dependency np to v10
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency start-server-and-test to v2
• fix(deps): update dependency cypress to v13
• fix(deps): update dependency sirv to v2
• fix(deps): update react monorepo to v18 (major) (react, react-dom)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency noop-stream to v1

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency npm-run-all with npm-run-all2 5.0.0
• chore(deps): update all non-major dependencies (@babel/cli, @babel/core, babel-preset-gatsby-package, del, eslint, eslint-config-prettier, eslint-plugin-cypress, eslint-plugin-prettier, eslint-plugin-react, execa, gatsby-cypress, globby, np, prettier, start-server-and-test)
• chore(deps): update dependency cpy to v11
• chore(deps): update dependency del to v7
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency pretty-bytes to v6
• chore(deps): update gatsby monorepo (major) (babel-preset-gatsby-package, gatsby, gatsby-cypress, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-sharp, gatsby-source-filesystem, gatsby-transformer-sharp)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

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

I need it only for single page

I have an old site that I'm replacing with a Gatsby site. The issue is I'm hosting the gatsby site in a directory structure for the future state. To host the site in a subdirectory I'm using pathPrefix.

EG. Current site = https://example.com
Gatsby site = https://examples.com/gatsby

The idea is to replace the old pages slowly by replacing the html with that generated by gatsby. This is done via edge side includes at the CDN level. So it's like an iframe but with no iframe.

EG. Gatsby URL: https://examples.com/gatsby/foo
Old URL that's being replaced: https://examples.com/foo

The problem is this check in production-app.js.

https://github.com/gatsbyjs/gatsby/blob/b9411d80691c7e6942b15053bbf2784fa22efec6/packages/gatsby/cache-dir/production-app.js#L68

if (
    // Make sure the window.page object is defined
    page &&
    // The canonical path doesn't match the actual path (i.e. the address bar)
    __PATH_PREFIX__ + page.path !== browserLoc.pathname &&
    // ...and if matchPage is specified, it also doesn't match the actual path
    (!page.matchPath ||
      !match(__PATH_PREFIX__ + page.matchPath, browserLoc.pathname)) &&
    // Ignore 404 pages, since we want to keep the same URL
    page.path !== `/404.html` &&
    !page.path.match(/^\/404\/?$/) &&
    // Also ignore the offline shell (since when using the offline plugin, all
    // pages have this canonical path)
    !page.path.match(/^\/offline-plugin-app-shell-fallback\/?$/)
  ) {
    navigate(
      __PATH_PREFIX__ + page.path + browserLoc.search + browserLoc.hash,
      { replace: true }
    )
  }

No matter how I try to short out this check I can't because PATH_PREFIX is always called into every check.

The fix suggested below doesn't work as the path prefix (/gatsby) would not be included in window.location.pathname. Same issue happens with setting matchPath as the above check also add the path prefix in the check.
gatsbyjs/gatsby#4337 (comment)

window.page = window.page || {};
window.page.path = window.location.pathname;

I just need to have the canonical check not happen and let me host any gatsby page into any other location no matter the pathname.