CODEWITHSUNDEEP
reactjswebpackcreate-react-appyarnpkg
Sezer Egrek
Sezer Egrek

Reputation: 76

Is there a way to build multiple apps from single one with replacing some assets and components?

I have a folder structure of my create-react-app project below. I have a single project but multiple results. While I am developing and building projectA, I want to copy all the files under the projectA folder and paste them where necessary.

I can use theming but there are a lot of projects to build and the component can change totally related to project. In this method, login.js and some other components will have separate condition blocks for every projects. These components will be very messy after a few projects. And I don't want the logo of other projects in the build file.

I choose overriding necessary files dynamically. I am looking for a best practice. Please help.

projectA
    public
        index.html
        favicon.ico
    src 
        images
            logo.png
        pages
            page.js (this extends base_page)

projectB
    public
        index.html
        favicon.ico
    src 
        images
            logo.png
        pages
            page.js (this extends base_page)

public
    index.html
    favicon.ico
src
    images
        logo.png
    pages
        app.js
        base_page.js
        page.js (this extends base_page)
    index.js

Upvotes: 0

Views: 953

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

It's possible, but I think you first have to restructure your folders:

project
 |--webpack.config.js
 `--src
     |--common
     |   `--pages
     |      |--base-page.js
     |      `--other-resources.js
     |--appA
     |   |--images
     |   |  `--logoA.png
     |   `--pages
     |      `--page.js
     |--appB
     |   |--images
     |   |  `--logoB.png
     |   `--pages
     |      `--page.js
     ...

Then in your appA/pages/page.js, you can do something like

import Page from '../../common/pages/base-page'

And in your webpack, the entry can be

module.exports = {
  entry: [
    './src/appA/index.js',
    './src/appB/index.js',
    // other apps
  ]
}

However I'm not sure if this is possible without ejecting create-react-app.

Upvotes: 1

Related Questions