How to path to an image file in an electron app? - node.js

I am creating an electron app and packaging for distribution with electron-builder for windows and Mac. This app creates a folder and some pdfs inside varying based on user input. The pdfs also use an image, which as a node app I was keeping in the root folder of the app.
I managed to write to the desktop using an absolute path.
if (!fs.existsSync(`/Users/${user}/Desktop/2019 Certificates`)){
fs.mkdirSync(`/Users/${user}/Desktop/2019 Certificates`);
}
but when I use this relative path
stampandseal.png
I get the following error:
I expect it to find the png relative to the js file, however I get the following error:
fs.js:121 Uncaught Error: ENOENT: no such file or directory, open 'stampandseal.png'

If I understand your issue correctly, you are trying to copy an image from within the app bundle to the user's desktop. Use __dirname to reference the directory your code is executing in, and then build the path off of that.
The code below is used by my main.js file, which is in the directory containing my app directory. I use upath to build the path and jetpack instead of fs for copying
var fromPath = upath.join(__dirname, "app", "assets", "image.png");
jetpack.copy(fromPath, toPath, { overwrite: true });

Related

Deploy VueJS App in a sub-directory or sub-path

I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.

How to resolve path to a file within node_modules

Problem loading a file using relative path when my node app is initialised using a another node app
I have created an npm which relies on a file stored relative to project root. something like this
index.js
- res
- config.json
Now I read the config.json using following code
const pathToConfig = path.resolve(__dirname, '../res/config.json')
This works great locally.
But in my prod setup this app is initialised by another node app.
And __dirname resolves to root of that app so all my logic to find config.json get messed up.
Is there any way I can read the file without worrying about how node app was initialised?
Have you tried the command process.cwd()? It is almost the same as __dirname but does differ slightly.

In Electron app how do you reference the temp path?

Learning Electron I'd like to do some file processing after a drag and drop. On a Mac the equivalent for tmp is a $TMPDIR. Referencing the API documentation of app I was able to locate the app.getAppPath() which shows my path from a simple console log from main.js. Below app.getAppPath() there is getPath() but when I try app.getPath(temp):
let foobar = app.getAppPath("temp")
console.log(foobar)
I get an error in the console of:
ReferenceError: temp is not defined
Through my research I've read:
How to store user data in Electron
How to get the original path of a portable Electron app?
Creating and Using Temporary Files
Get Special folder Path in Electron
electron temp directory
How to set a custom path for Electron app installer
In Electron is there a built-in for the temp directory to work on all operating systems or a process to reference?
Note:
Even after referencing the string of:
console.log(`The temp path is: ${app.getAppPath("temp")}`)
it returns the same response as:
console.log(`The AppPath is: ${app.getAppPath()}`)
which is:
The temp path is: /Users/Grim/Documents/GitHub/electron-quick-start-boilerplate
The AppPath is: /Users/Grim/Documents/GitHub/electron-quick-start-boilerplate
and the above console.log tests have been added after letWindow.
app.getAppPath() doesn't take an argument.
For app.getPath(name), the argument should be the string "temp": app.getPath("temp").

ahref ../ directory not working as intended

So currently I'm using nodejs express , serving a simple webpage.
Right now I am trying to use a href to link to a source outside of my current folder, using ../. However, it seems that I am unable to go out of my "app" folder.
Below is the structure of my file directory
App
-> index.html
-> route.js
Another Folder
-> Another Folder
-> Resource1.jpg
I have tried using
but it does not work.
Is there something wrong with my path or it is just not possible to locate a resource outside of App folder?
If you try loading image in your page then try this path with img tag or if your file is pdf then rename it to file.pdf try other wise no idea because of no error in your script :)

Reading files from a directory inside a meteor app

How can i read the public directory in a meteor application inside my /server path.
I tried using the native 'fs' package but i keep getting a file/directory not found error.
var fs = Npm.require('fs');
var files = fs.readdirSync('/public/soundfiles/');
Has anyone used the filesystem package to read static files inside a meteor application?
I learned that it is best to upload files in your private folder if you are not displaying them outside.
In my case I need to store XML uploads and process them.
At first I wrote the XML into the public folder but that would trigger a reload.
Then I renamed the the upload folder to /public/.#uploads which would stop the reload of Meteor, but then again...it completely ignored that folder during build and the uploaded folder would not exist in the build (throw ENOENT error during read).
So I figured out it is best to put the files in /private/files and then reading goes as follows:
result = fs.readdirSync('assets/app/files')
Everything in the private folder will be moved to the Assets folder where during runtime there is an APP folder available (you do not see that in your build folder structure).
It helps to just simple dump result = fs.readdirSync('.') to see what folder you in and look through the structure.
***UPDATE*****
Locally putting files in private folder still triggered meteor rebuild/update (perhaps not in production..) so I found another solution using the UploadServer just to define the upload directory:
https://github.com/tomitrescak/meteor-uploads
This works for me in Meteor 1.0:
var fs = Npm.require('fs')
var xsd = fs.readFileSync(process.cwd().split('.meteor')[0] + 'server/company.xsd', 'utf8')
Access files without the "/public" part. In a running Meteor app, the public directory becomes your root, and everything that is located at /public/whatever can be accessed at /whatever.
Additionally, if you're playing around with files, you might find these useful:
FileSaver.js
CollectionFS
This is no longer true. For Meteor 0.8, the folder "../client/app" is public. Thus, use fs.readdirSync('../client/app') to get files and folders in public.
Source: personal experience and https://stackoverflow.com/a/18405793
For meteor 1.0.2 public is /web.browser/app/
Checked by entering .meteor dir
Total path in linux /home/user/your_app_name/.meteor/local/build/programs/web.browser/app/
And to get to root is `process.env.PWD or process.cwd().
Im not sure if its work deployed.
_meteor_bootstrap_.serverDir +'/assets/app'
This is path to private folder.
For Meteor 1.4, use server Assets.
See the official docs on Assets
http://docs.meteor.com/api/assets.html
On the server you can use fs to access any part of the meteor directory tree, not just /public, for example
import fs from 'fs';
const rd = process.env.PWD;
const obj = JSON.parse(fs.readFileSync(`${rd}/private/file.json`));
would read and parse a json file located at private/file.json under your meteor app directory root.

Resources