JavaScript Single-Page-App - how do i "distribute" a json? - javascript

I'm currently using the Aurelia-Framework and want to load a big json file into my application.
The problem is, I cant figure out how to get the json file to appear in the "dist" folder of my Chrome browser so that the script is able to find it.
In short, I want to do this:
var request = new XMLHttpRequest();
var jsonString = request.open("GET", "file://../core/data/5e-SRD-Monsters.json", false);
...and yes, the path is correct but the folder "data" and its content won't appear in Chrome's debug sources.
Do I have to include the json via gulp somehow?

Your main question is "how to get the json file to appear in the 'dist' folder". As also mentioned in the comments, that is a matter of simply includ.
For a skeleton jspm project do the following:
Open the ~/build/export.js file
Include the file, or folder, containing the .json file in the first 'list' section
This looks something like:
module.exports = {
'list': [
'index.html',
'config.js',
'favicon.ico',
'LICENSE',
"jspm_packages/npm/bluebird#3.4.1/js/browser/bluebird.min.js",
'jspm_packages/system.js',
'jspm_packages/system-polyfills.js',
'jspm_packages/system-csp-production.js',
'styles/styles.css',
'core/data/5e-SRD-Monsters.json'
],
Here is an an example on where to put it.
Important: Considering you're talking about a 'dist' folder I am assuming you use the skeleton with jspm. The process is totally different when you're building an Aurelia app built with CLI, skeleton webpack or perhaps the starter kit.
Now you've got the .json file in the dist folder. But using the XMLHttpRequest to load a file:// isn't exactly the recommended approach. As also mentioned in the comments, ideally you should load it up as a http request, not a file request.
Let's take this into advice. All you need to do is add the aurelia-fetch-client to your library and then you can simply do something like this:
import { HttpClient } from 'aurelia-fetch-client';
export class App {
get_stuff() {
let http = new HttpClient();
// assuming the file is in /dist/core/data/,
// simply read it through a promise + through a relative path:
http.fetch('./core/data/5e-SRD-Monsters.json')
.then(data => console.log(data));
}
}
Now this uses http rather than file://, which will eliminate any permission issues that might occur, such as lack of access to the filesystem directly.

Related

Webpack externals help needed

I have created an application (using vue and webpack) that needs two urls to access REST services. These urls are different per deployment. So I would realy like to have an external configuration file (maybe JSON) that stores those urls.
I did some research and I came upon webpack externals. Added externals to my configuration file:
module.exports = {
...
externals: {
tryout: path.resolve(__dirname, "./test.js")
}
}
test.js is really simple --> export default {url1 : 'https://bla', url2: 'https://bla2'}
From the vue file where I need this file I call:
import Tryout from 'tryout'
console.log(Tryout)
This causes my application to show a blank screen. No errors in the console nor in the npm console screen.
Not sure what is happening. couple of questions:
I am using dev server not sure where to place the test.js file I placed it here : __dirname, "./test.js" so this is in my build directory...
Should I load it in my index.html file like an external libary load?
does anybody has a step by step example? Couldn`t find it online..
This should be simple but no clue since I am not getting any error or message...
Any help would be really helpful!

Vue CLI 3 prevent cache busting for certain output files

I'm building a chrome extension with vue cli 3. I've got the basics working well, but I was hoping to also run my content and background javascript through the build process instead of just putting them into my public folder and copying it into dist. This is mostly just so I can use import/export to clean up my file structure.
I was able to add them as new "pages" in the vue config and even without the html template file, they get built properly and moved into dist.
The problem is, they then get the cache busting string appended to their filename so I'm unable to reference them in the extension manifest. For example, background.js becomes background.d8f9c902.js
Is it possible to tell the vue config that certain "pages" should not get the cache busting? The documentation here does not seem to expose that as a parameter.
Thanks in advance!
Filename hashing can be disabled for all files:
https://cli.vuejs.org/config/#filenamehashing
It works in my case using below vue.config.js:
// vue.config.js
module.exports = {
lintOnSave: true,
filenameHashing: false
}

Modify config file during release

Current situation
We have many clients using our client application software. The problem is we need to connect to different REST endpoints. The base URL is always different.
Currently we're using a config.json file which we're manipulating during release. A simple example
config.json
{
"endpoint": "http://localhost/api"
}
During startup of our application we're doing an HTTP call to get this file. For further API calls we're using the endpoint provided by the config.json file.
Desired outcome
What we really want is this becomes part of our applications instead of doing the HTTP call. We're using webpack to build our application.
In our dataservice layer we want to do something as follows:
import config from './config';
// use config.endpoint;
config.js
export default {
endpoint: "http://localhost/api"
};
We can override the confg.js file during build. But since we have many clients (+- 30) we don't want to build for each client. We just want one build and modify the config.js file during release with the correct configuration.
Basically we want webpack to ignore the file during build and copy the file to the output folder + inject it in index.html.
I've done some research and I'm not sure how to solve ths issue. Maybe the initial HTTP call isn't that bad afterall?
Edit: the endpoint is just an example, we have more client specific configuration defined in our client app
Ok, this was easier than expected. I simply added a new entry with the config file.
entry: {
config: "./src/config.ts",
app: "./src/main.ts"
}
In the UglifyJsPlugin I added an exclude for the config file.
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
exclude: /(config).+/i,
sourceMap: true
}),
The output is a "readable" config file.

How to dynamically create javascript file in Browser

I recently started exploring Browserify for bundling Node modules and using them in the browser. It's neat and works great, however I want an improvement in the work flow. In my use case, I have a script.js file that requires node modules like Cylon etc.
For brevity, script.js looks something like:
"use strict";
var Cylon = require('cylon');
Cylon.robot({
name: "BrowserBot",
connections: {
arduino: { adaptor: 'firmata', port: '/dev/tty.usbmodem1411' }
},
devices: {
led: { driver: 'led', pin: 8 }
},
work: function(my) {
Cylon.Logger.info("Hi, my name is " + my.name)
every((2).seconds(), function() {
Cylon.Logger.info("Toggling the LED");
my.led.toggle();
});
}
});
Cylon.start();
I was looking at the bundle.js file that browserify generates and i could find the exact code block mentioned above, and I think a node process is started with this code and some bindings. I want the script.js file to be dynamic to allow the user to use a different pin on an LED or any other small change for that matter. Since I am not changing any dependencies for this file, I should be just able to replace that block in bundle.js with the new contents of the script.js file as other modules are already loaded and bundled in the bunndle.js right?
I want to know if this is possible in a browser setting. Chrome Apps allow file Storage, so it is possible for me to generate bundle.js dynamically after initial creation where I just plug-in the contents of script.js and load bundle.js in an HTML file? How do I go about this?
While the question is not specific to Cylon, I am still adding it as a tag for my specific usecase.
All the .js files should be specified in the Apps manifest.json. I don't think you can edit items from the app's folder (even when accessing it thru file storage)

Can Grunt load remote files over HTTP directly from the `src` value in files object/array or globs?

You can use grunt-http or grunt-curl etc. to download a remote file to a temporary location on disk and then read it. However it would be cleaner if that step could be skipped and we could use the Grunt files objects/arrays/globbing to download the file directly. Something like:
grunt.initConfig({
uglify: {
test: {
files: [
{ src: 'http://example.com/cool-file.js', dest: 'build/cool-file.min.js' }
],
},
});
(In my particular case I need my build process to work off of HTML files generated by a local Python Tornado web server with a lot of templating logic that I can't replicate elsewhere.)
I've tried searching for a plugin that would streamline this but no dice. Any options or patterns for doing this other than downloading the files in a separate task?
I first thought I will say
Are you an ambitious developper?
First try! Then ask.
But seem you have already try, then... instead of reporting thi pseudo-issue here, post it to their github account that later versions think of implementing such features...
Or implement it and suggest to them.

Categories

Resources