Change React build path post application build - reactjs

The project structure that we have is:
| - - - - - - myproject-service
| | - - - src
| | - - - main
| | - - - resources
| | - - - static
| - - - - - - myproject-ui
| - - - build
When we build the UI project the build folder is created in the project. But we want to copy the build folder to mypoject-service/src/main/resources/static/
How do we achieve that during the build phase?

if you are using create-react-app you should have a paths.js file in the config folder.
change the
appBuild: resolveApp('build'),
in module.exports section to your path which in your case will probably be:
appBuild: resolveApp('../myproject-service/src/main/static')

Related

Missing class properties transform pdfjs-dist

I have Installed npm install pdfjs-dist i want to load PDF on the browser on mobile phones. However I am getting the below error. How can i resolve this?
Failed to compile.
./node_modules/pdfjs-dist/build/pdf.js
SyntaxError: C:\node\node_modules\pdfjs-dist\build\pdf.js: Missing class properties transform.
3520 |
3521 | class PixelsPerInch {
> 3522 | static CSS = 96.0;
| ^^^^^^^^^^^^^^^^^^
3523 | static PDF = 72.0;
3524 | static PDF_TO_CSS_UNITS = this.CSS / this.PDF;
3525 | }

I get "Parsing errors" on .ts files when I migrate my app from React 16.x to 17.x

I am working to migrate a React app to the latest v17.x version (from 16.13.0).
However I am getting parsing errors on the typescript files when I upgrade React (the app uses javascript mostly, but some files were later added in typescript).
e.g.
src\components\data\Assets\FYAsset.ts
Line 2:11: Parsing error: Unexpected token
1 | export class FYAsset {
> 2 | private apiData: Object | undefined; // the res data, as received from the API
| ^
3 |
4 | private id: number | undefined;
5 | private providerId: number | undefined;
src\components\data\Users\FYUser.ts
Line 5:19: Parsing error: Unexpected token
3 |
4 | export class FYUserConstants {
> 5 | static readonly USERGROUPID_ADMIN = 1;
| ^
6 | static readonly USERGROUPLABEL_ADMIN = "ADMIN";
7 | //
8 | static readonly USERGROUPID_EXPERT = 2;
The old app uses the following versions (which work fine):
react-scripts v3.4.0
react/react-dom v16.13.0
typescript v3.8.3
For the migration, the errors appear when I move over to react-scripts v4.0.1 and react v17.0.1. I tried upgrading typescript to v4.1.3 but that didn't change anything.
Again, everything works fine in the previous branch. Could you suspect what causes the issues?
Thanks
The problem was solved by deleting the .eslintcache file that was carried over from the legacy project.

Proxying multiple create-react-app static folders with Nginx

I have a nginx hosted on a VM with an authentication service that expose a simple login page and some other services hosted onto a secondary VM (create-react-app builds served through serve -s build).
If the user tries to access a protected resource gets promped the login page.
The architecture is as follow:
+-------------------------------+
| Other VM |
| |
| +-----------------------+ |
| |serve -s build -l 8000 | |
+--------------------> localhost:8000 | |
| /resource1 | | | |
| | +-----------------------+ |
| | |
+----------+ | | |
| | | | +-----------------------+ |
/static? | Linux | | | |serve -s build -l 7000 | |
+---------->+ nginx +-----+--------------------> localhost:7000 | |
| Auth sys | /resource2 | | | |
| | | +-----------------------+ |
+----------+ | |
| ● |
| ● |
| ● |
| |
| |
+-------------------------------+
I have correctly configured nginx to reverse proxy all the resources.
resource1, resource2, resourcen and auth system access to a /static folder to take css, js, etc...
I have done a "workaround" to retrieve the correct static folder that is as follow:
location /static {
try_files $uri $uri/ =404;
if ($http_referer ~ ^http://linuxhostname/resource1) {
proxy_pass http://otherVMhostname:8000;
}
if ($http_referer ~ ^http://linuxhostname/resource2) {
proxy_pass http://otherVMhostname:7000;
}
}
Seemed to work fine until I faced this situation:
trying to access /resource1 without authentication:
The user is requesting /resource1 but the login page is prompted, nginx is proxying static files onto the other vm while they are on its file system, this results in a 404 error.
To mitigate this issue I thought to change the static folder name into something specific (e.g. for resource1, put static_r1) but I found that is not straightforward (see this link).
Do you have any ideas on how this can be approached nginx side or application side?
Thanks
After some experience and the updates made to the create-react-app I learned that you can use an environment variable when you build your package that is PUBLIC_URL=basepath.
This will make the index.html (the entrypoint of the React SPA) look for static files inside /basepath/static, hence by setting this variable the job is done.
The only thing you need to be aware of is the actual path on the websever, for example: if you use the nginx directive try_files $uri it will actually look inside $root_dir/basepath since the $uri will contain the base path.

Can't resolve Dart App Engine dependency

I am trying to build a Dart application for Google App Engine but Dart can't resolve any appengine dependency except for the 0.0.1 version. Here is my pubspec.yaml:
name: MyApp
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.44
browser: ^0.10.0
appengine: '>=0.3.0 < 0.4.0'
transformers:
- angular2:
entry_points: web/main.dart
This is the error I get:
Package appengine has no versions that match >=0.3.0 <0.4.0 derived from:
- MyApp depends on version >=0.3.0 <0.4.0
I have tried every appengine version from https://pub.dartlang.org/packages/appengine/versions but the only one that works is ^0.0.1
Downloading appengine 0.0.1...
Got dependencies!
I would really like to use something newer than 0.0.1. Is something broken or am I missing something?
*Update:
I ran in verbose mode as per Günter Zöchbauer's suggestion and this is the output:
ERR : Package appengine has no versions that match >=0.0.2 <0.4.0 derived from:
| - MyApp depends on version >=0.0.2 <0.4.0
FINE: Exception type: NoVersionException
FINE: package:pub/src/entrypoint.dart 154 Entrypoint.acquireDependencies.<async>
| ===== asynchronous gap ===========================
| dart:async _Completer.completeError
| package:pub/src/entrypoint.dart 199 Entrypoint.acquireDependencies.<async>
| ===== asynchronous gap ===========================
| dart:async _Future.then
| package:pub/src/entrypoint.dart 152 Entrypoint.acquireDependencies.<async>
| ===== asynchronous gap ===========================
| dart:async Future.Future.microtask
| package:pub/src/entrypoint.dart Entrypoint.acquireDependencies
| package:pub/src/command/get.dart 30 GetCommand.run
| package:args/command_runner.dart 178 CommandRunner.runCommand.<fn>
| dart:async Future.Future.sync
| package:args/command_runner.dart 131 CommandRunner.runCommand
| package:pub/src/command_runner.dart 130 PubCommandRunner.runCommand.<async>.<fn>
| dart:async Future.Future.sync
| package:pub/src/utils.dart 103 captureErrors.<fn>
| package:stack_trace Chain.capture
| package:pub/src/utils.dart 117 captureErrors
| package:pub/src/command_runner.dart 130 PubCommandRunner.runCommand.<async>
I expanded the version to include anything between 0.0.2 and 0.4.0 and it fails. It is definitely throwing a no version found error even though I can manually download the versions from the web.
This is a known issue with pub. If it can't resolve a matching set of dependencies it sometimes prints misleading messages.
pub upgrade --verbose
should reveal more information that allows to investigate what dependencies pub is unable to find compatible versions of.
The conflict is the protobuf package.
appengine 0.3.2 depends on protobuf 0.5.0
angular2 2.0.0-alpha.44 depends on protobuf 0.4.2
but angular2 2.0.0-alpha.45 also depends on protobuf 0.5.0
If you change your angular dependency to
angular2: ^2.0.0-alpha.44
or
angular2: 2.0.0-alpha.45
or
angular2: ^2.0.0-alpha
pub can resolve all dependencies just fine.

QooxDoo: Dialog contrib Error

I am doing RIA application with QooXDoo, I want to use Dialog like windows to prompt & notify the user.
I have used dialog contrib from qooxdoo. But i got following error when i am trying to run
dialog.Dialog.warning( "I warned you!" );
Error in property decorator of class dialog.Alert in method setDecorator with incoming value 'shadow-popup': Is invalid!
I did added Dialog contrib in "config.json" file as follows.
"libraries" :
{
"library" :
[
{
"manifest" : "../qx-contrib-Dialog-master/Manifest.json"
}
]
}
Can any one guess what is the problem?
Thanks in advance.
Can you give some context?
Which version of qooxdoo and qx-contrib-Dialog are you using?
Which type of application are you developing (contribution|desktop|inline|mobile|native|server|website)?
Do you get an error message when running ./generate.py source?
I'm not sure what your problem is but when starting from scratch everything works for me (using qooxdoo-2.1, creating a desktop app and using the current head of the master branch from qx-contrib-Dialog):
$ cd workspace
$ wget/unzip => qooxdoo-2.1-sdk/ // I've already done that before...
$ ./qooxdoo-2.1-sdk/create-application.py -n stackoverflow
$ git clone https://github.com/cboulanger/qx-contrib-Dialog.git
file system at this moment:
workspace/
|-- qooxdoo-2.1-sdk/
| |-- application/
| |-- component/
| |-- create-application.py
| `-- ...
|-- qx-contrib-Dialog/
| |-- Manifest.json
| |-- README.md
| |-- demo/
| |-- qooxdoo/
| `-- source/
|-- stackoverflow/
| |-- Manifest.json
| |-- config.json
| |-- generate.py
| |-- readme.txt
| `-- source/
$ cd stackoverflow
$ vim config.json
config.json
.-----------
| ...
| "libraries" :
| {
| "library" :
| [
| {
| "manifest" : "../qx-contrib-Dialog/Manifest.json"
| }
| ]
| }
| ...
$ ./generate.py source
$ vim source/class/stackoverflow/Application.js
Application.js (adapted with reference to the demo on github [1])
.-----------
| ...
| // Add an event listener
| button1.addListener("execute", function(e) {
| // alert("Hello World!");
| dialog.Dialog.warning( "I warned you!" );
| });
| ...
|
$ ./generate.py source (cause the dialog classes aren't known yet)
Open app in your browser! :)
[1] https://github.com/cboulanger/qx-contrib-Dialog
Finally i got the solution for this error.
I just removed the following line from Dialog.js file, after that all are working fine.
'decorator' : "shadow-popup"
But shadow effect is missing.
So i did wrote a decorator named "shadow-popup" in theme file.
Thank you.

Resources