I've built a gridsome 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 gridsome, I did the following:
gridsome create sample
cd sample
gridsome 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 gridsome work to create a truly off-line website?
A website needs a webserver. When you are running in dev mode Gridsome provides that for you, when you build out the site you need something to serve it to your browser.
Related
I've got Chrome set to download to a specific folder by default, I've set both the iMacros browser and the iMacros chrome extension to by default download to the same folder. But when running through a particular site, it is still downloading to the user generic 'Downloads' folder as if those settings are being ignored.
Could this be a site driven issue or is there something I'm missing?
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?
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
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.
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.
I love using WebStorm for building html/css/JavaScript apps but one problem I have not been able to figure out is how to deal with paths to images on my src attribute of image tags.
I have (for example) a project path in WebStorm of /documents/myproj/index.html where I've opened the project at /documents/myproj. WebStorm sees the root of the project as /myproj but the URL created when I browse is localhost/myproj/index.html. When I publish the site it becomes localhost/index.html (on my public server).
Image src tags are a problem for me because in development, the WebStorm server wants src=/myproj/1.jpg and in production it wants src=/1.jpg.
Any suggestions for how to keep this straight between running in local mode with WebStorm's built-in simple web server and the published version?
You can edit the host accordingly to make WebStorm serve your files using a different URL. See https://devnet.jetbrains.com/message/5532366#5532366 for some hints
This is currently a problem with a development environment that I'm running, which is Django's built in 'development server' (the one started with python manage.py runserver) running on my local machine. On my deployment machine which runs FCGI this is not a problem.
CSS files fail to download in Chrome but successfully download+render in Firefox. Both browsers get 200 OK responses from the server, but for whatever reason Chrome doesn't seem to be sent/receive the content of the files.
I can use either browser to navigate to the URL of the CSS file itself and view the document just fine.
It's probably best explained with screenshots...
In Chrome
Chrome Network Page
Everything up top looks like it downloads just fine. But note at the bottom Chrome reports "Failed to load resource" for all the CSS files.
Chrome CSS Headers
Everything looks OK in the CSS headers...
Chrome CSS Content
Except the content is empty...
In Firefox
Firefox CSS Headers
Everything looks good (note that the 'content-length' header is identical to Chrome)
Firefox CSS Content
And there's the content!
What gives? What could possibly be causing the content to fail to load?!
EDIT: I'm still pulling my hair out over this one. This only happens in Chrome. I've restarted/updated/cleared my cache a million times--I'm at a complete loss.
It's simple enough to avoid--just use a different browser to view the page--but why is it happening?!?!
Time to upgrade your chrome, or to move to stable channel, if you are using the distribution repository archives.
I once faced a similar issue and followed the same course.
If you have an ad blocker or tracker blocker chrome extension installed, such as Ghostry; it can block some legitimate files. I have run into this problem. To fix it I added an exception for the problem site.
I am trying to load a google web toolkit application with django, but the gwt host page does not seem to work (just a blank screen) when I invoke it with render_to_response() from my django view. I have verified that a plain hello-world html file loads fine from the gwt war directory, so it's not a path issue. Also the host page renders if I manually open it in a browser. I am running my django app in development mode using manage.py runserver. Any ideas?
When you say you've tried it manually within the browser - is that over HTTP or file:///
Does sound like a path issue, TBH. Have a look in Safari or Firebug to see the HTTP activity when the host page loads. The 'nocache' JS file you include the in the host page loads the appropriate compiled JS for that user agent. Maybe it can't find JS.