0

I've built a gatsby website, but when I try to use it offline (by directly loading index.html into my browser), it fails to load the files in the assets folder, and links to other pages fails

running in windows: after installing gatsby , I did the following:

gatsby new sample
cd sample
gatsby build

then I went to file explorer and opened the sample/dist directory and double clicked on index.html (Chrome is my default browser, but IE behaves the same)

the result is a half-loaded webpage that is missing the style sheets, javascript, images, and links are broken.

For instance, the "about" link on the first page points to "D:/about" vs. ".\about.html".

Is there anyway to make gatsby work to create a truly off-line website?

David Hope
  • 2,216
  • 16
  • 32

3 Answers3

1

Try using gatsby serve from the root of your project. Serve spins up a web server to serve your prod build.

Look it up on the Gatsby CLI docs on their site.

Derek Nguyen
  • 11,294
  • 1
  • 40
  • 64
Chris Adams
  • 1,376
  • 1
  • 8
  • 15
1

I've built a gatsby website, but when I try to use it offline (by directly loading index.html into my browser), it fails to load the files in the assets folder, and links to other pages fails

Gatsby will create a React app for you when it is built, and because most React apps use client-side routing, your links won't work with file:// URLs.

After installing the Gatsby CLI and building your site with gatsby build you should run gatsby serve which will serve up index.html with a static file server on your own machine.

See a similar answer about create-react-app here

kylegill
  • 314
  • 1
  • 12
0

Gatsby isn't really set up to do that, unfortunately. It's a site generator, not page generator, and it expects living on a server. The result is that while the files are static, the navigation isn't.

Because I spent some time experimenting, this is what DOESN'T work:

Setting . as pathPrefix in gatsby-config.js. Gatsby lets you set path prefix, which it then prepends to all generated urls. Unfortunately, this prefix always gets "absolutized" somehow. . gets converted to /., for example.

Setting the absolute path of the file on disk as pathPrefix. Same as above - file:///path/to/file doesn't survive the build (results in file:/) and /path/to/file breaks the JavaScript.

Setting the pathPrefix to a bogus value like /NOTAPREFIX and search-replacing it in the generated files. Breaks the JavaScript, again.

Something I haven't tried but might get you somewhere, would be to disable the Single Page App functionality. It's possible, reportedly, (or maybe with this plugin?) but no good step-by-step instructions anywhere.

corvidism
  • 201
  • 3
  • 11