Github Pages is Not Loading Specific Folders - static-libraries

I'm trying to use github-pages to host an online version of a spatial programming course, however the static files for stuff like CSS and JS aren't loading properly.
e.g. https://esda-spatial.github.io/Course-Site/tutorials/03%29%20Working%20with%20Vector%20Data.html
Whereas when I open the same file locally it appears like this:
When I inspect the network tab I can see that the CSS and JS files are 404'ing when requested, and I can't access them either - e.g. https://esda-spatial.github.io/Course-Site/_static/jquery.js.
However, when I try accessing them directly from the repo everything is fine - e.g. https://raw.githubusercontent.com/ESDA-Spatial/Course-Site/master/_static/jquery.js
Github pages itself has been set up to read directly from the root repository of the master branch as well.
Any help solving this would be much appreciated

Related

create-react-app: where do I put dynamically uploaded images?

Hi I'm working with create-react-app, i've setup a file upload that allows images to be sent to the backend and saved locally (to the projects build directory). I'm able to dynamically reference images via localhost:4000/image.png so that already works (ie: i have a blog that lets me upload images that I later access via a blogList).
However i figured this probably isn't the best place to dynamically upload images to. I've read the docs on create-react-app and both the locations that mention images dont seem to work for my use case, i feel like im definitely doing something wrong but im not sure what.
docs im referring to:
Says use "import" however im loading dynamically so i cant see how this would work?
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files
says use public, however wouldnt that require a rebuild? since im loading dynamically that isnt possible: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#when-to-use-the-public-folder
NOTE: i have a image uploader and backend working fine it works already using the /build directory. i can upload and dynamically reference images. I'm just looking for best practices for doing something like this. Thanks!
(if you mention "just use nginx" could you please elaborate on the implementation a little)
As a learner I struggled with this problem and tried different approaches once a while ago. For rarely used assets, using /public for client could be useful but I have an app where clients upload images and manage them. Like you, I did not like those approaches and ended up with this setup.
Create a /public directory on backend and upload images to /public/images
Serve /public directory with Express statically.
Use dynamic path variable (via a config setup) for image paths. http://localhost:backend_port/public/images for development and /public/images for production.
I don't know this is the best approach but it worked for me. Beside being best approach when I upload images before that setup CRA was refreshing (hot reloading) my app after each image upload.

Creating a Firefox extension that modifies a page that exists on a local web server

I'm trying to create a Firefox extension that will allow me to modify a page on my company's local web server. I don't have access to modify the source code of the page itself. So in the same spirit of extensions like the Reddit Enhancement Suite I'd like to write some code that will inject a CSS file and some javascript to enhance the page on page load for myself and my co-workers.
I've successfully made a Firefox extension that loads in files on regular sites like say google.com and such. But once I change the domain to match the page on my company's local web server (for example: 10.0.0.12:82), it stops working. Specifically I am attempting to inject a .css file into the page. I am using resource:// to do it and it works flawlessly on other sites. The CSS is not being injected at all. So it's not a matter of permissions or anything. It seems like the javascript isn't firing.
Is it not possible to do this on a local web server? Perhaps there are extra measures I need to take first since it's not a normal website?
Here is the relevant code from the files in my extension. I set up a path in my manifest file and then in the javascript file that loads I append a css file located at \chrome\skin\resources into the <head> tag of the loaded page.
chrome.manifest file
resource cemod chrome/skin/resources/
console.js file
$("head").append('<link media="all" href="resource://cemod/page.css" type="text/css" rel="stylesheet"></link>')
Just to reiterate, this code works fine when the extension is written to activate on other pages like reddit.com. But it stops working once I change it to the IP address of my company's local web server.

Include source code from different directory

I have three different domains all on the same server and I want to run the code on all three domains from one source on the same server, but not sure the best way.
Here's what I have:
domain01.com
domain02.com
domain03.com
domain04.com/sourcecode
I want domain01-03 to run the code inside domain04.com/sourcecode so the user can go to their domain and not have to go to domain04.com to see their site. I want to keep all the code inside domain04.com because I don't want to have to put the code inside each domain every time I make a code change.
For whatever reason I can't get my head around the best way to do this -- and want to do it right.
Any advice?
Thanks!
All you need to do is create a mapping on the first three sites to the appropriate directory in the fourth site, eg map /domain04 to /full/path/to/domain04/sourcecode, then refererence its CFML resources via /domain04 in CFC and include paths. The inference here is the code does need to be accessible via the file system for all sites concerned.
Note that if you also want to server non-CFML files via HTTP (eg: images, css, js), then you will also need a web server virtual directory along the same lines.
None of this requires a framework, it's standard CF / web server functionality.
Are you using a framework? One like ColdBox could make this trivial if your code is written modularly. (Disclaimer, I am affiliated with ColdBox)
If not, it really depends on what the code is. CFCs can be mapped anywhere via ColdFusion mappings. Even .cfm files can be included as long as the file systems are visible. If you're wanting to basically have complete copy of a site in another web root without duplication, I would first consider using a shared source control repo and a build process that checks it out in the appropriate places, and secondly a good old, symlink will also work .

how to serve or force file download located from a different directory in meteor to client browser

A user comes to my site and inputs something, and my site generates a file as an output.
Unfortunately i cannot place the generated file on the public directory - as you all now Meteor watches this and restarts every time the public folder content is changed.
so my generated files lives in .meteor/local/build/programs/server/files
so for example i have document.pdf that lives in that directory, I'd like to serve/force/trigger a file download to my client's browser that lets his browser download this document.pdf file.
In general Its not a very good idea to do this. It makes it very hard to scale your app. Node isn't good at serving chunky static files either.
Then also if you have two servers there is a slight chance that the other one's data is requested (e.g if you use a download manager).
I'm not sure but I think Meteor's live code reload doesn't work/is switched off in when in production mode (when using meteor deploy or meteor bundle)
The best thing to do would be to upload your file to S3 and then redirect the user to the file there.
You can also use Iron Router and server side routes to create a dynamic file download.
See Iron Router Server Side docs. Then you set your content type to application/pdf and send back the file directly without saving it to the filesystem. If you need to you can also save it in some other folder and serve it up yourself.
Then have a peek at this answer for an example of reading in and streaming out a file:
Node JS file downloads using a stream.
Since this is a server side route, using express and Iron Router, you shouldn't have to mess with any of the fibers related async issues.

Jenkins UI customization

I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.
Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful.
Any suggestions or links or tutorials is also appreciated.
PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.
I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-
https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin
The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.
Any doc or link is appreciated.
Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.
The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.
We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).
Those two files need only be hosted either a handy http server, or you can place them in usercontent.
You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.
Handy things to note:
Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
When making DOM tree changes to content that is refreshed - attach it to the layout updates with:
layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.

Resources