Question 254194 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use external resources in React project

I’m working on a React / VTK.js project,
In VTK.js to read a VTK file we call this function with the directory of the VTK file (that must be in the public folder tree structure).

const reader1 = vtkPolyDataReader.newInstance();
reader1
       .setUrl(`Ressources/MrSKIN.vtk`)
       .then(async () => {
            pd = await reader1.getOutputData(0);
            ...

I need to read a VTK file in other "system directory":

reader1
       .setUrl(`C:/Users/admin/data/MrSkin.vtk`)

But that doesn’t work, I’ve read that I must re-configure the webpack file but I don’t know how to exactly do it

Tags:

2

Answers


  1. 0

    First thing, you can’t directly access files outside your project directory in React (security impositions by web browsers). Therefore reading the VTK file won’t work.

    If you want to make it work here’s a step by step on how to do it:

    1.) Firstly setup a server with Express Js
    2.) Create a static file to host your files
    3.) Upload files on the said static server after configuring it for serving purpose (Use Express’s ‘express.static’ for this)

    Here’s an example:

        const express = require('express');
const app = express();

// Serve uploaded files from the 'uploads' directory
app.use('/uploads', express.static('uploads'));

// Your other routes and server configuration here

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

    In this example, files in the uploads directory will be accessible from http://yourserver.com/uploads.

    Now last step is to modify your React code to read the VTK file using its URL on the server:

        const reader1 = vtkPolyDataReader.newInstance();
reader1
  .setUrl(`/uploads/MrSkin.vtk`) // Use the correct URL on your server
  .then(async () => {
    pd = await reader1.getOutputData(0);
    // ...
  })
  .catch((error) => {
    console.error(error);
  });

    replace /uploads/MrSkin.vtk with the actual URL path to your uploaded VTK file on the server.

    Login or Signup to reply.
  2. 0

    To read a VTK file in a different system directory in a React/VTK.js project, you need to reconfigure the webpack file. Here are the general steps to follow:
    Eject from the React app: You need to eject from the React app to have full control over the webpack configuration. To eject, run the following command in the terminal:

    npm run eject

    Configure the webpack file: After ejecting, you will have a config folder in your project directory. Inside this folder, you will find a webpack.config.js file. Open this file and add the following code to the module.exports object:

    module.exports = {
  // ...
  resolve: {
    alias: {
      'vtk.js': path.resolve(__dirname, '../path/to/vtk.js'),
    },
  },
  // ...
};

    Replace ../path/to/vtk.js with the path to the vtk.js file on your system.
    Import vtk.js: In your React component, you can now import vtk.js using the following code:

    import vtkPolyDataReader from 'vtk.js/Sources/IO/Legacy/VTKPolyDataReader';

    You can then use the vtkPolyDataReader to read the VTK file from the specified directory.
    It’s worth noting that ejecting from a React app can be a complex process, and it’s important to understand the implications of doing so before proceeding. Additionally, modifying the webpack configuration can have unintended consequences, so it’s important to test your changes thoroughly before deploying your application.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search