I run NPM build on the PWA boilerplate I am using.
Folder structure on server is as follows:
my-project ->
static,
index.html,
service-worker
I have then hosted on server and the Manifest and assets are returning a 404.
The project is currently here.
https://evilernie44.github.io/my-project/
Any help is much appreciated.
Changing routes on the manifest and two different servers
I want to get a boiler-plate hosted as a starting point for my PWA
Your script tags point to the wrong path.
Take this tag for example:
<script type=text/javascript src=/static/js/app.98f21a65b373eaa50022.js></script>
The browser resolves it to https://evilernie44.github.io/static/js/app.98f21a65b373eaa50022.js, which does not exist.
The correct path should be ./static/js/app.98f21a65b373eaa50022.js. The extra dot instructs the browser to build the full url relative to the current path.
Alternatively, you can specify an absolute path, such as /my-project/static/js/app.98f21a65b373eaa50022.js which points to the correct location.
In conclusion, any of the following 2 script tags would work:
<script type=text/javascript src=./static/js/app.98f21a65b373eaa50022.js></script>
<script type=text/javascript src=/my-project/static/js/app.98f21a65b373eaa50022.js></script>
By default Vue CLI assumes you are running the application as root, so it will try to load the files from '/'.
When deploying to production, or in a subfolder, you need to set the publicPath in vue.config.js
https://cli.vuejs.org/config/#publicpath
Related
I want to publish my Svelte web app to GitHub pages and based my application on the template https://github.com/sveltejs/template. When I run npm run build, public/build/bundle.js is created but no index.html. All the tutorials I found talk about how to deploy Sapper projects, or to use external tools like Vercel and Surge, but is it possible to just build Svelte without any external tools? All I want is a static HTML page that I can copy to GitHub pages.
Edit: See the accepted answer for the general approach, however for non-root-directory-deployment, you still need to make the paths relative. I created a pull request at https://github.com/sveltejs/template/pull/239.
In svelte, index.html is a static file which will import your bundle.js and run it.
index.html is located at /public/index.html while your bundle.js is located at /public/build/bundle.js
in svelte template, index.html imports /build/bundle.js using a script tag to initialize the application.
while deploying, you just need to upload the whole /public folder and everything should be operational.
I have recently upload a flutter website inside of a folder in my server.
But it's not working well. I have notice that main.dart.js needs to have the folder name in the url. But It is not working well... What more things I have to change for running the website without more problems?
Try adding the base path to you're index.html.
Example:
<base href="/FolderName/">
Im including the google cast external javascript library. When I run with ionic serve it works good, but when I run the app in the phone, the library is not loaded. Debugging can see that :
https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/a/d/ad4c985f45c1c538bdfbfbb02d10141b6929e1d5.png
The "http" is replaced by "file"!
I tried to include the libraries with that code:
script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1">
and with type="text/javascript" added; but all codes replaces http by file, and the library is not loaded.
Any suggestions?
When you run the app do not add cdn files starting with "//:", add them like "http://".
If its possible download those files and keep them in directory, after that give directory path to file.
e.g. <script type="text/javascript" src="assets/js/library.js">
I am starting to play with the new angular router. I did an npm install as was noted https://www.npmjs.com/package/angular-new-router. However, I am having difficulty setting up the script tag.
I am playing around with a tutorial to work with the router and the author sets up his router as so...
<script src="lib/router.es5.js">
However I am unable to access the script. I looked through the files on the node module.
I can find the router.es5.js file in the docs folder that runs inside the dist folder.
However I am unable to get that running. I have tried changing my folder name to be a better match. However, I am still not correctly accessing the file.
Additionally, I tried to go through the entire file directory with no success.
<script src="/angular-new-router/dist/docs/router.es5.js"></script>
I know this tutorial was from last April, so I am wondering if something has changed or if there is another way to make an install or how others are setting up their path?
***** update ***** i am following the link https://github.com/angular/router/pull/252/files.
I copied the script tag that the author is using on this
<script src="/node_modules/angular-new-router/dist/router.es5.js"></script>
This makes sense as the file is going through the node modules folder. I will change this to the answer unless someone knows a better/more correct way.
Check out this discussion I had with Brandon Roberts (towards the bottom), who seems to be in the know.
I've been using the router code referenced in his Github repo.
NOTE: This answer will no doubt be out of date very soon!
I created a blog with Jekyll and now I need to deploy it and send it to a person that need to navigate it without a web server. So, I entered jekyll build from terminal and get the compiled project in _site. But now, if I open index.html it doesn't get the assets (CSS). In the head tag tag there's /css/main.css while I need css/main.css (no initial slash). I don't want to change manually the url, so I'm asking if there's a way to deploy a Jakyll project for showing in local without webserver.
This is possible only if you know where, in the file system, it will be deployed.
Examples :
Linux
For a deployment in /home/user/www, go in _config.yml and set baseurl: /home/user/www
Windows
For a deployment in C:/Users/Toto/www, go in _config.yml and set baseurl: /C:/Users/Toto/www
Deployment means copying generated files in the target folder, not copying the _site folder.
Do a jekyll build and send you files with deploy instructions.
Edit:
This answer is for you, not the client.
As you client is certainly running windows, you just set your baseurl: /C:/_site, zip the _site folder and ask the client to unzip in C:/.
The client will just have to click on C:/_site/index.html to start the site in his default browser.
Change the assets directory to relative paths such as: assets/css/.
This will work on a server or locally.
Set a page variable to represent the nesting in your Yaml front matter. Then, append that variable to your assets.
---
layout: default
title: Nested Page
path: ../
---
or
---
layout: default
title: Root level page
path: ""
---
<link rel="stylesheet" href="{{ page.path }}assets/stylesheets/style.css">