Search code examples
create-react-app

How to remove the last / in create-react-app's package.json homepage


I'm trying to run React on a Tridium Jace-8000 device. The file urls for the files are as such:

https://localhost/ord/file:^static/js/90.5af7b6f6.chunk.js

I was able to put the following in the package.json file:

"homepage": "./file:%5E" (which replace /file:^ to avoid the special character)

However, it adds a slash at the end of the url, so I end up with errors in the console like:

GET https://localhost/ord/file:%5E/static/css/90.f2a8a0e3.chunk.css
net::ERR_ABORTED 400 (Bad Request)

As you can see, there is the extra / between %5E and static.

Is there any way to force the build process to skip the extra / ?

Thank you,


Solution

  • If anybody ever need this, I fixed it by making sure there were just 1 file per JS or CSS at build, using the following instead of the normal build:

    const rewire = require('rewire');
    const defaults = rewire('react-scripts/scripts/build.js');
    let config = defaults.__get__('config');
    
    config.optimization.splitChunks = {
        cacheGroups: {
            default: false,
        },
    };
    
    config.optimization.runtimeChunk = false;
    

    I launch this build script because I modified my package.json to run this file instead of the normal build.

    I also had to make sure to disable any LazyLoad I had in this project, and replace it with the usual import.

    Then, once built, I have to go in the index.html file change it as follow:

    from: <link href="./static/css/main.0c6501c3.css" rel="stylesheet"> <script src="./static/js/main.5dfc694d.js"></script>

    to: <link href="static/css/main.0c6501c3.css" rel="stylesheet"> <script src="static/js/main.5dfc694d.js"></script>

    Then I go in the backup folder of stations in my computer, put the built files at the root level of the station, upload it to the Tridium Jace using the niagara vykon workbench software.

    Also, I had to modify the react router to use the MemoryHistory instead of the regular one, because the changing URL in the Jace was problematic.

    import { createMemoryHistory } from 'history'
      const memoryHistory = createMemoryHistory({
        initialEntries: [ '/' ],  // The initial URLs in the history stack
        initialIndex: 0,          // The starting index in the history stack
        keyLength: 6,             // The length of location.key
        // A function to use to confirm navigation with the user. Required
        // if you return string prompts from transition hooks (see below)
        getUserConfirmation: null
      });
    
    const App = props => <Router history={memoryHistory}/>;
    

    One extra step I made was to add a redirect page I called home.html as the homepage in the nav.nav file I have in the station. Here is the script tags. This launch the react app on the jace in full screen instead of inside the embed menu.

    <script>
    
    window.location.replace("../file/index.html")
    </script>