Thursday, March 15, 2018

How to create offline web app with JavaScript that can read local file and parse?

Leave a Comment

I'm trying to create an app with a browser interface that allows users to input a text file and then parse it for certain phrases. I have all the logic/regex I need to do the parsing, I just don't know how to implement it into a webpage interface.

What I currently have uses node.js and only works when I run the command with node (not in the browser) and hardcode the path to the file on my local system.

const fs = require("fs"); const text = fs.readFileSync("C:\\Users\\bob\\Desktop\\test\\sample.txt", "utf-8");  const textByLine = text.split("\n");   //rest of script logic below 

I've been researching things like require.js and browserify which from what I understand, allow you to use node.js on client side, but I'm not sure if this is what I need.

I sort of want to make an electron app, but I'd rather build it out as a webapp first.

Is this the best way to go about accomplishing what I'm trying to do?

4 Answers

Answers 1

The easiest solution for this would likely be a simple webpage using some of the browser-based File APIs, and would not require using NodeJS. @Quentin's Another duplicate comment above links to a good example of this. With this style the user has to provide the file to be input though and your script cannot just go willy-nilly looking for it or accessing the user's disk as it pleases. While it is possible to use some of the NodeJS modules or user-made modules in the browser the support is limited. There are no browser-based replacements for many low-level parts of NodeJS, and because of this some modules do not/cannot support the browser directly, but many (where possible) have at least one alternative.

Second would be a NodeJS CLI app. As it would only run in the terminal it would not be difficult to setup using one of the many libraries to help make CLI apps for NodeJS such as commander.js or node-js-libs/cli.

Finally, a full-blown Electron app would be the most complex. It's essentially the best-of browser and NodeJS worlds as it's GUI capable and supports [almost?] all of the standard NodeJS libraries, but of course it adds another layer of complexity because Electron has it's own API too. A big bonus though is that it's also pretty easily cross-platform capable and you don't need to write a bunch of cross-platform browser supporting code as it only uses Chromium (Chrome) underneath.

Edit: Clarifying based on ghybs's excellent point in the comments.

Answers 2

I would suggest you setup a simple Nodejs server application with express.js framework.

Then you use multer or node library to upload your text file and then through your logic your said you have you can create a controller to handle the business logic for parsing the phrase within the text you have uploaded and read . You can send request to the node and get response after processing the phrases you can send response back to the client/browser interface. Hopefully , this idea might be what you are looking for.
Express setup
Multer documentation
express file uplopader documentation.
Maybe this will help you setup a node and express app. If you need it Node&express setup

Answers 3

The browser (regular javascript) doesn't have access to users system files because it is a security risk, what you would want to do is have a form for saving a file to LocalStorage which is then read by your javascript file. That would be if you want a pure javascript implementation.

If you're using NodeJs you could have access to the file system using the package (fs) you were using above to save and read the file. With this, you'd want the user to submit the file via a html/javascript webform that sends the file to a backend endpoint which is then saved to the projects directory using fs module. Then, from the node script would read/parse that file, and serve the desired results back to the user via another endpoint that the user requests.

Answers 4

use nodejs is best way to create local application, sometime you can use https://electronjs.org/ to build native app, Are you using Atom ? It can build by electron :D

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment