How do I generate a production build for a frontend react app?

[arunrajkumar235 (Arun Rajkumar)]

I’m using the following config in package.json

"fdkConfig": {
  "frontendFramework": "react",
  "configPath": ""
},

While fdk run works just fine during development, how do I generate a production build of my react application before submit it for approval?

@Saif @kaustavdm @Raviraj @Santhosh

[Asif (Asif Ahmed)]

Hi @arunrajkumar235

Ideally fdk pack should pack your app by compiling your react app and placing it inside the app folder and then moving forward to create the zip for you. Your zip would then contain both the built assets inside app folder and also the original source code under src folder for App reviews.

You can follow the steps mentioned here: Build Single Page Applications With React and FDK.

Please let us know If something does not work here.

Thanks!

[arunrajkumar235 (Arun Rajkumar)]

Hi @Asif ,

I don’t have an issue with fdk pack. The problem is that fdk run creates a development build of the react app and places it in the app folder.

All fdk pack does is just creates a zip file out of the entire project.

Now, my zip file contains the development build of the react app and not the production build of the react app.

This increases the size of the assets that are loaded in the frontend location.
My app.zip file is 2.5MB. Ideally it should be in the order of KB.

[Asif (Asif Ahmed)]

Hi @arunrajkumar235

From what I can see, fdk pack does run the webpack build in production mode. The scripts generated under the app folder are minified and processed when fdk pack runs.

If I do the test in our your_first_react_app boilerplate, the dev build is around 3Mb vs 1Mb for fdk pack.

I think there still might be a miss for further optimizations on the build process. We currently don’t have the ability to customize this feature but we can take it as a feature enhancement.

Can you check the same on your app and see whether you get similar differences between fdk pack and fdk run?