How can I generate a build without bundling?

🌵 Needle Engine
,
1

Hi, I am using Unity for building with Needle Engine. In the documentation I can see mentioned the “CDN without bundlers”, but the example code was moved and is missing and in Unity when generating a project I can only select templates with bundlers.

We will roll our own React app and use the Needle Engine build scene as a background. The main issue with the vite + React build is that it includes React along the other libraries and it doesn’t make sense to include React twice. Ideally we would need just to be able to target an HTML element and have the Needle Engine build render its scene there. I’m pretty sure that the vanilla JS is what are we looking for and could work in our situation.

2

Hi Dan,

To generate a build without bundling in Needle Engine and to use it with your own React app, you will need to follow a few steps to integrate and ensure that React and Needle Engine don’t conflict.

Here’s a step-by-step plan:

  1. Create a Needle Engine Scene: In Unity, create and set up your scene as you usually would. Make sure it’s configured to be used in a non-bundled way.

  2. Build the Project: When building your project in Unity, select a template that allows you to generate a build with the “CDN without bundlers” option. It may be called something like “Vanilla JS”. If this option is not available, you may need to explore the Unity project settings or consult the documentation for any potential updates.

  3. Prepare the HTML Element: In your React application, create a target HTML element (e.g., a div) where you want the Needle Engine scene to render.

  4. Load the Needle Engine Build: You can use a script tag in your React component or index.html file to include the Needle Engine build.

  5. Instantiate the Session: Once the Needle Engine scripts are loaded, instantiate the Needle Engine scene and attach it to your target HTML element.

Here’s a basic code example of how your React component could look:

import React, { useEffect } from 'react';

function NeedleEngineComponent() {
  useEffect(() => {
    // Load the Needle Engine scripts
    const script = document.createElement('script');
    script.src = 'path-to-your-needle-engine-build.js'; // Update with the correct path
    script.onload = () => {
      // Initialize the Needle Engine scene
      const element = document.getElementById('needle-engine-container');
      if (element) {
        // Assuming the API provides a method `initScene` to start the engine
        NeedleEngine.initScene(element);
      }
    };
    document.body.appendChild(script);

    return () => {
      // Cleanup function to prevent memory leaks
      document.body.removeChild(script);
    };
  }, []);

  return <div id="needle-engine-container" style={{ width: '100%', height: '100%' }} />;
}

export default NeedleEngineComponent;

Make sure to replace "path-to-your-needle-engine-build.js" with your actual build URL.

Next Steps:

  1. Confirm any settings or documentation updates in Needle Engine related to building without bundlers.
  2. Test the integration thoroughly to ensure no conflicts occur between Needle Engine and React.

If you encounter specific errors or issues, feel free to ask for further assistance!

1 replies left - Get a PRO license for more AI replies.
thread_jAEgE9PLHh1mE9vnAk7Oo0x8
Reply to this message to continue the conversation

3

Hi Dan,

I agree, adding react twice doesnt make sense and is not necessary.
Have you considered adding Needle Engine to your web project and just setup the Unity scene to point to your react project instead? (by picking that directory in the Export component)

4

Thanks. In the end I used the default Vite template which suits my needs. Was a bit mislead by the React template in the documentation and tried that first initially.

5

Hi, ok cool. What exactly mislead you? Does it mean you don’t actually use React for your project now or are you going with your original solution by including the vite bundle in your react project…?

6

Yes, now I’m using the Vite bundle in my React project. From documentation initially I though I need to build with React template to work with my React project.

7

Ok. Out of curiousity: Have you tried my suggestion here How can I generate a build without bundling? - #3 by marwie1 ? If not could you share why?

8

I didn’t try your suggestion, but it lead me to understand better what I need, the Vite template was easier to try first and was what I needed in the end. Thanks for the support

9

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.