Disables client side routing for Gatsby.
npm install --save @wardpeet/gatsby-plugin-static-site
// In your gatsby-config.js
plugins: [`@wardpeet/gatsby-plugin-static-site`];
Disables client-side routing to allow hybrid sites behind a proxy or rewrite rules
License: MIT License
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.
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!
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
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.
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.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | gatsby-image |
|
npm | npm-run-all |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
react
, react-dom
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@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
)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
)e2e-tests/asset-prefix/package.json
cypress ^7.2.0
express ^4.17.1
gatsby ^3.4.2
gatsby-image ^3.4.0
gatsby-plugin-manifest ^3.4.0
gatsby-plugin-offline ^4.4.0
gatsby-plugin-react-helmet ^4.4.0
gatsby-plugin-sharp ^3.4.2
gatsby-source-filesystem ^3.4.0
gatsby-transformer-sharp ^3.4.0
polka ^0.5.2
prop-types ^15.7.2
react ^17.0.2
react-dom ^17.0.2
react-helmet ^6.1.0
sirv ^1.0.11
cross-env 7.0.3
gatsby-cypress 1.4.0
start-server-and-test 1.12.1
package.json
webpack ^5.30.0
@babel/cli 7.13.16
@babel/core 7.14.0
babel-preset-gatsby-package 1.4.0
cpy 8.1.2
cross-env 7.0.3
del 6.0.0
eslint 7.26.0
eslint-config-prettier 8.3.0
eslint-plugin-cypress 2.11.3
eslint-plugin-prettier 3.4.0
eslint-plugin-react 7.23.2
execa 5.0.0
globby 11.0.3
make-dir 3.1.0
noop-stream 0.1.0
np 7.5.0
npm-run-all 4.1.5
prettier 2.2.1
pretty-bytes 5.6.0
gatsby ^3.0.0
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.
I need it only for single page
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 )
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 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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.