liferay-npm-bundler/liferay-js-toolkit: Use .env files

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-08-13T10:08:38Z

AFAIK you just need to play with the NODE_ENV environment variable. So you could run 'NODE_ENV=production npm run build' , for example.

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-08-06T11:04:44Z

I am having a similar problem but I have a real react portlet project instead of the adapting one. My project is deploying only dev mode jar file to the Liferay server, and I see not option to create a production build instead. I have checked my portlet with the react developer tools chrome extension and it says I have a dev mode.How can I create and deploy a production build? I am using react 16.8.6 and Liferay 7.2, also I created the project using Liferay JS Toolkit. I also posted the question in the forum here.

This is the message I get from the react developer tools from Chrome:

What should I do? I have been struggling with this for few weeks now and I don't really know what to do, I apprecially your help.

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-03-12T08:23:29Z

How about a pull request instead of a fork? I can help you with any doubts you have and everybody would benefit from what you do...

Regarding the feature, I haven't investigated it, so I don't know how it should be done exactly, but I suppose there must be some way of retaining the production output while injecting development/staging/whatever configuration to the code being built. But I'm no expert in create-react-app and haven't looked at it yet :-(.

However, if you feel it is possible and know how to do it there should be no problem in integrating it in the bundler. The only prerequisite, as I said, is that the output looks like a production build, not that the code in the webpack bundles is production code.

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-03-12T06:48:43Z

Hi Ivan,
If I understand you correctly, that there is no option to use another .env file for the build process.
That's pretty bad.
OK. Another idea is to create a fork of the liferay-js-toolkit project and make our changes to use other .env files.I thank you very much for the information. And have a nice day :-)

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-03-11T12:42:52Z

Mmm... This is the place where the adapted build calls the native build tools (in your case react-scripts -> https://github.com/liferay/liferay-js-toolkit/blob/master/packages/liferay-npm-build-support/src/scripts/build/index.js#L31
As you can see, we force prod=true for Angular and Vue and don't pass any argument for react (because production is the default). Other than that, we are just calling the "build" npm script so you can put anything you want there as long as when it is finished, a react production build is put in the output folder for liferay-npm-bundler to take on an adapt it.
As I said, the bundler only knows how to adapt webpack bundles created in the same format of a production build, but it doesn't rely on any other thing. I mean, it doesn't care about what's inside the bundles.
If you are curious about what the bundler does to adapt the native build, you can have a look at this bundler's preset -> https://github.com/liferay/liferay-js-toolkit/blob/master/packages/liferay-npm-bundler-preset-create-react-app/config.json, which may give you an idea of what steps are needed and why they assume that the build is of production type.
Hope that helps.

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-03-11T10:51:34Z

Hi Ivan,
thanks for your information. Well, that's too bad. First of all, I'm fine with that the js-toolkit makes a production build. But we have a multi stage system (development, staging and production) and want to deploy the React apps automatically by a CI/CD server. And for this we need the opportunity to build the React app with different environment variables. And can't see any solution for this problem, right?

RE: liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-03-11T09:19:23Z

Hi Sascha:
If you are adapting a React app (as opposed to creating a real portlet -> https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-generator-liferay-js) there's no way to create a non-production build.
This is because the non-production builds generate a very different structure from that of production ones which would need to be adapted in a different way.
However, you can use React's native tools to test your application and, when you are sure it works, make the production build and deploy it to Liferay. That is the intended way to use it, as adaptation is only a helper for people who already own a codebase targeting other platforms in addition to Liferay.
If you need more functionality then you should consider moving your project from an adapted React app to a real React portlet project, as linked above.

liferay-npm-bundler/liferay-js-toolkit: Use .env files

2020-03-10T16:29:45Z

Hey Guys,
it's time to ask the community. I'm stuck at developing a React app in Liferay 7.3.0-GA1. I've created a React app and run the Liferay JS Generator after that. All things are fine. The OSGi bundle will be created and is deployable (great!). But now, I need to set up some environment variables to use them in my JS-code. My first idea was: 'Hey, create some .env-files like: .env.development, .env.production and so on'. Now I'm in trouble with the liferay-npm-bundler or the liferay-js-toolkit. At the github page of the liferay-js-toolkit is a note, which says that the adapter of the toolkit will always make a 'production build' (github-page). But I need also a 'development' or 'staging' build. The documentation is not very helpful and I have no idea to bypass the production build.
Has anybody a solution to make a development build?