CODEWITHSUNDEEP
reactjswebpack
DarkGuardsman
DarkGuardsman

Reputation: 136

Setting up webpack to export to set folder

I'm working on an old project still running jquery for frontend, java spring for the backend, and maven for building. I've been asked by my boss to introduce react into the stack so we can toy around with converting some of the pages.

My goal is to not impact the existing implementation to heavily and instead output the result of webpack into a defined directory. This way I can just point the backend at that location for pathing.

So far I have an apps folder in my workspace that contains all my react stuff that works on its own. This was generated using 'npx create-react-app folderName'.

I've somewhat read up on how to set the export but am generally confused. As a lot of resources I've found assume a new setup or a replacement of an existing setup. While I'm looking to only replace a single page currently.

Upvotes: 0

Views: 600

Answers (1)

Felix
Felix

Reputation: 2691

I don't think create-react-app is the right tool here, since you don't create a complete application with React but incrementally add React code. I would suggest using Webpack on its own. This makes your application cleaner and easier to maintain with your other code.

If you want to keep your React code separate from your existing code you can create a library based on webpack's Authoring Libraries Guide. You can than render your components with ReactDOM.render() (Docs). Note that you can call this function (almost) unlimited times on one page which allows you to partially replace your existing code.

Replacing a page then means to create a root DOM element and call the render function: 

<!-- page.html -->
<html>
    <head></head>
    <body>
        <!-- more html -->
        <div id="page-root" />
        <!-- more html -->
    </body>
</html>

import React from 'react'
import ReactDOM from 'react-dom'
import Page from './routes/YourPageComponent'

ReactDOM.render(<Page />, document.getElementById('page-root'));

The previous code means that you render your code in the new code which is transpiled by your webpack loaders (e.g. Babel-Loader, Typescript-Loader). If you want to render the code in the existing code, look at the Doc's about Webpack Libraries to export render functions into a global context. The following scripts are an example out of my head.

// components/PageExampleComponent.jsx
import React from 'react';

export default function({pageTitle="example"}){
    return <div>
        <h1>{pageTitle}</h1>
    </div>
}



// libary/index.js
import PageExampleComponent from './components/PageExampleComponent';

export const MyLibrary = {
    PageExampleComponent
}

The previous code requires the following (partial) Webpack config to export MyLibrary:

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    // based on a fast look into the docs, I think the following are optional:
    libraryTarget: 'window',
    libraryExport: 'default'
  }
};

To render a component of this library, you need React and ReactDOM as scripts in your website - and of course your own library script. You can than call ReactDOM.render() in plain JavaScript:

ReactDOM.render(
    React.createElement(window.MyLibrary.PageExampleComponent),
    document.getElementById('page-root')

Another idea would be to move everything into Webpack. This might be easier, as you don't have barriers of different Javascript-Versions and dialects (e.g. with and without JSX support). You can even separate your jQuery code and your React code by using two entry points:

module.exports = {
  //...
  entry: {
    oldCode: './src/jqueryIndex.js',
    replacement: './src/reactIndex.js'
  },
  output: {
    filename: "[name].js"
  }
};

Upvotes: 1

Related Questions