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.
Related
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.
I’m developing a web application written in Django, I’m running the server in my machine and use Chrome/Firefox to view and test the website. I want to be able to work on it while I’m on a plane/tube and I don’t have internet.
Now, the HTML loads some resources from the local server but some others from external CDNs. I want to work on some js and css files that are hosted on my machine and view the changes in the browser, so I have to force reload the website since chrome by default just shows the cached versions of these, but if I force reload, then ALL sources are reloaded and the CDN sources obviously fail to be fetched (and my site looks horrible).
So I want to know how I can reload (in Chrome or Firefox) only some of the sources of my site and still use the cached versions of the CDN ones (assume these are cached because I load them before going into the plane).
Any help or advise on how other people would solve this would be much appreciated.
I've done Django + React application.
I build React code using 'npm run build' and moves that files to hosting together with Python files, I've set up static files in Django app, and now when I'm going to site URL, I see that all static files are loaded. But they don't run. And when on the local environment I saw pretty JS app, now on hosting I see a white screen and when I select compiled JS files in Network tab in Developers Tools (Preview response) I read message "You need to enable JavaScript to run this app." (for CSS too).
I know that this is a noob question. But can you help me to solve this issue?
Thank you.
Check this site out https://www.techiediaries.com/create-react-app-django/
And go down "Integrating React App with Django in production"
This will show you how your app should be structured with the correct settings in your django files.
I have created a Angular 2 form which posts the form data to a postgres DB using a Rest API. Now, I want to serve my Angular 2 app on AWS S3. I googled on this and I found that creating a webpack is a solution but not able to create one. I want to know where to start with, to bundle my code and serve it on s3.
GitHub link for Form: https://github.com/aanirudhraj/Angular2form_signaturepad_API
Thanks for the Help!!
The quickest way is to build the app using angular-cli and then deploy the content of the 'dist' directory as a static site in S3 (an S3 bucket can be configured to host a static site; make sure you assing read permission to 'anybody' to avoid http 4xx return codes).
You just need to host it as a static site on S3.
Check this: http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html
I infer from your code that you are using angular-cli.
Create a dev/production build
ng build --dev / ng build --prod
Content of your dist folder will contain bundled files for deployment. Your primary file for refrence will be 'index.html' as this will load you angular app.
You need to decide what kind of server you'll be using to serve you webapp.
For development purpose when we do ng serve , webpack-dev-server is used as a static file server (local development). I'll recommend should go with the most comfortable/cost effective solution you can have when deploying to actual server.
Static file Server
Directly hosting website is aws space as a static website.
Aspnet Core with static file server middleware. (*)
Nodejs Express with static file server middleware.(*)
Java serverlet for serving static files. (*)
(*)Following aproach will also allow you to have some server-side code if you require in future.
When you deploy your ng2-app, you should use AOT(ahead of time) compile.
I guess you are using JIT(just in time) compile.
In angular2 guide page,
With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.
I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.
If you are curious about ng2 AOT compile, read this guide.
angualar2-cookbook-AOT
And here is example angular2 app with webpack2 and lazy load.
use file structure and config files in here.
When I tested with example app, files bundled with aot was smaller than 500KB.
angular2-webpack2-aot
When you use aot compile with #ngtools/webpack or whatever,
just put all files in dist directory which have files compiled with aot in your S3 bucket, and I recommend to use aws cloudfront cache for your s3 bucket resources.
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