Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Node.js module #6

Open
DJWoodZ opened this issue Nov 6, 2020 · 7 comments
Open

Node.js module #6

DJWoodZ opened this issue Nov 6, 2020 · 7 comments

Comments

@DJWoodZ
Copy link

DJWoodZ commented Nov 6, 2020

This is a great project. Thank you!

Have you considered offering this project as a Node.js module and possibly also publishing it on NPM?

Thanks again!

@omrips
Copy link
Owner

omrips commented Nov 8, 2020

Yes, I'll do it after I'll post a new version on the plugin, hopefully in couple of weeks.

@DJWoodZ
Copy link
Author

DJWoodZ commented Nov 15, 2020

Thanks. I really appreciate you taking the time to look into this. It will make it easier to integrate into Node-based projects and will allow you to standardise dependency management, i.e. you can use NPM to handle the Three.js dependency and probably remove the load_three_files option/feature. I look forward to the update.

@omrips
Copy link
Owner

omrips commented Feb 13, 2021

Sorry for the long wait.
I was actually trying to do it, but then came to a dead end.

  • Since the script is intended for client side only, I'm not sure how npm will work here (as it intended for server node.js server).

As you can see, I'm not a node.js expert, and would like to learn more if and how a client side code will make sense with npm. ?

@garzadba
Copy link

It is actually a good idea. I currently develop an app with Angular. It uses npm to manage dependencies. For frameworks like Angular and react would be totally worth.

It would simplify updating and management of dependencies like ThreeJs as @DJWoodZ mentions.

I think the implementation in NodeJs is not possible since node has no DOM which is needed to render the models.

@DJWoodZ
Copy link
Author

DJWoodZ commented Mar 8, 2021

Apologies for taking a little while to reply. I appreciate that the Node.js ecosystem can be a little overwhelming at first, but Node.js isn't just for running JavaScript on a server. It started out that way, but many client-side JavaScript projects also now make use of it to improve the development process. If it is of interest to you, I think it is worth spending a little time to learn the basics.

To help you get started, I've created a simple 'STL Viewer' project: https://github.com/DJWoodZ/stlviewer

Hopefully this will give you an idea of how you might go about using Node.js and npm in this project. Essentially, I used Create App to generate the project boilerplate and the code from this article as a simple Three.js STL viewer implementation.

I stress that this is a simple example. Before you publish your project as an npm module, you'll probably want to consider implementing some additional developer tools (for example, a testing framework such as Jest), but I've tried to keep it as simple as possible to help you get started.

The following are used in the example:

  • npm for dependency management. Its main purpose is to manage the libraries needed to build and run the project (i.e. three.js, plus some developer tools)
  • node.js provides a runtime environment for JavaScript, i.e. to run developer tools such as parcel.js
  • parcel.js is primarily a bundler (invoked with npm run build-prod) but also provides a handy development server (npm start) that 'hot reloads' your code as you save it - see: https://parceljs.org/
  • eslint is used to 'sanity check' the JavaScript (invoked with npm run lint) - see: https://eslint.org/
  • babel is used (by parcel) to 'transpile' the JavaScript - see: https://babeljs.io/docs/en/

To get started with the example, you will need to:

  1. install Node.js (which includes npm): https://nodejs.org/en/
  2. git clone my simple 'stlviewer' project
  3. cd into the root of the project
  4. run npm install to install the dependencies
  5. run npm start to start the development server
  6. open the following URL in your browser: http://localhost:1234/

Once the development server is running, you can try updating some of the code (e.g. in src/stlviewer/StlViewer.js), hit 'save' and it'll reload in the browser :-)

I hope you find this helpful.

@omrips
Copy link
Owner

omrips commented Mar 11, 2021

Thanks DJWoodZ for the educated explanation, and garzadba for the feedback, I'll definitely try to build npm helper for this plugin.

@JayEnaR
Copy link

JayEnaR commented Jun 10, 2021

I have struggled a bit myself to get this library working in an Angular app. The different version of Angular handled the files like load_three_files differently. I got it working here in earlier versions of angular for those who might have struggled with it too.

It would be great to have the npm package available...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants