I have a js app (packaged with Electron) in which I wish to load a yaml file. The following works when I have packaged the app since the app.getAppPath() gives me access to the app.asar file, but in development it returns the path \node_modules\electron-prebuilt\dist\resources\default_app.asar.
fs.readFileSync(`${app.getAppPath()}/src/app/data/items.yml`, 'utf8')
Is there any way to get around this? Should my yaml file not be placed in the same directory as the rest of the app?
Use the path module together with the __dirname built-in to construct file paths to assets relative to your source files, the relative paths won't change between development and packaged builds. For example, assuming the following directory structure:
src/
app/
browser/
main.js
data/
items.yml
You should reference items.yml in main.js like so:
path.join(__dirname, '..', 'data', 'items.yml')
Related
I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!
If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!
I'm trying to turn an existing ember app to electron app using ember-electron addon. When I run ember serve and ember electron, files in dist and electron-out/project/ember are getting generated newly.
But the assets in these folders are different.
I'm using fingerprinted assets.
The assets expected by index.html file in electron-out/project/ember aren't present in dist/assets folder.
In ember-electron/main.js, I have the lines -
protocolServe({
cwd: join(__dirname || resolve(dirname('')), '..', 'ember'),
app,
protocol,
});
and
const emberAppLocation = 'serve://dist';
From my understanding, there are separate assets compiled for ember-electron app whose index.html refers to ember-electron assets but trying to fetch them from dist.
What is wrongly configured here? Please help!
I'm looking at this sample Angular application.
In the index.html file, there are lines like
<script type="text/javascript" src="/static/angular.js"></script>
However, upon closer inspection there are no folders in the project called static.
How does this work? How does angular locate these references?
Angular has nothing to do with this. It is the express server which takes care of the paths.
Take a look at server/config.js. You will see staticUrl: '/static' mentioned there.
Now open server/server.js (server.js is the script which runs before anything else runs in the app so all the configuration is done within this file) and on line 21 you will see require('./lib/routes/static').addRoutes(app, config);. This requires the static.js file which instructs the app to use /static (mentioned in the config.js file) as the path for static files such as CSS and javascript files.
This is a server side phenomenon. There is a middleware in this file server/lib/routes/static.js :
line : 9
app.use(config.server.staticUrl, express.static(config.server.distFolder));
What this does is : if any http request is started from config.server.staticUrl (whitch is /static for this app) the server tries to respond with the resource that are kept in a config.server.distFolder folder (which is client/dist for this app).
For example :
when you request to this url /static/angular.js the middleware tries to find angular.js file in client/dist/. Because client/dist directory is mapped to the url which starts with /static by the middleware.
When that HTML file is processed by the browser, the layout engine is making a separate HTTP request to the server to download the resource in question:
/static/angular.js
Since all of that is handled by the server routing mechanism there doesn't have to be a folder named static in client code. Your example is using Node.js Express routing which maps /static routes to actual physical paths.
Here is a piece of code that configures static routes:
https://github.com/angular-app/angular-app/blob/master/server/config.js
The important parts are:
staticUrl: '/static', // The base url from which we serve static files (such as js, css and images)
And the destination folder that /static maps to:
distFolder: path.resolve(__dirname, '../client/dist'), // The folder that contains the application files (note that the files are in a different repository) - relative to this file
Per the documentation the dist folder contains the Grunt build results, and if you take a look at the gruntfile you will find all the grunt configuration that makes this possible.
https://github.com/angular-app/angular-app/blob/master/client/gruntFile.js
I'm using restify for node to create a simple API. I want to have a directory /public where people can simply browse to that directory and download the file they browse to.
To accomplish this, I have used in /routes/public.js:
server.get(/\/public\/?.*/, restify.serveStatic({
directory: __dirname + '/../'
}));
as my file structure is like:
index.js
/routes
public.js
/public
files
to
be
served
however, I have noticed a big security issue. By browsing to http://domain.com/public/../index.js the source code can be downloaded! Obviously, I do not want this to happen.
Is this a permissions job or is there something else I should be doing? Thanks
Restify does check to make sure that you're not serving files outside of the specified directory. You're specifying the root directory for static files as __dirname + '/../' which is the root of the application. That means all of the files in your application can be served via static. If you only want files in the ./public/ folder served by restify, you have to use that as the directory.
The problem stems from the confusing (and in my opinion poorly planned) way they handle mapping routes to static files. As you said, the full route is included in the path of the requested file. This leads to awkward situations like this one. You have a public folder, and also want the route to include public. That means you have to have a ./public/public folder for your resources. An alternative approach would be to not include public in your route. You can setup your static handler like this:
server.get(/.*/, restify.serveStatic({
directory: './public/'
}));
Then a request to /somefile.txt would route to `./public/somefile.txt'.
I have a node.js file server running which (when visited) returns a html content. Also in the same directory of the node.js file, there is a javascript file called test.js. Also in the html content being returned, I need to load that javascript file. However in the html content, being returned, which comes out to be called index.html, the script looks like
<script type="text/javascript" src="test.js"></script>
But the server isn't sending the test.js file, its only sending the index.html file, and the script link is loading it relatively from the same directory.
Now I don't want to give the url to the test.js file. I want the node.js file to also send the test.js file, so that it ends up in the same directory as index.html. And then index.html can load it from the same directory.
Is there a way I can specify in the node.js with code to also send the test.js file?
Thanks.
Are you familiar with Express, as dandavis mentioned? Express allows you to set a directory for your static files. See my standard config below:
app
.use('view engine', jade)
.use(express.compress())
.use(express.limit('10mb'))
.use(express.bodyParser())
.use(app.router)
.use(stylus.middleware({
src: __dirname + '/www',
compile: function(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', false)
.set('warn', true);
}
}))
.use(express.static(__dirname + '/www'))
.use(express.logger());
The important part here is second from the bottom. Essentially, Express now knows to look for any assets you specify in your HTML within that static directory. For me, I create a folder titled WWW within my server folder, then add to it my JS, CSS, and images.
For example, say I create the "stylus" folder within my WWW folder, and add to it store.css. My link to that CSS asset would be the following in my Jade template:
link(rel="stylesheet", type="text/css", href="stylus/store.css")
Express knows to look for that asset relative to the __dirname + '/www' path, and thus locates the "stylus" folder and the CSS assets it contains. Hope this helps, and that I haven't ventured away from your intent!