Pulling dependencies using YARN from private registry artifactory - reactjs

The team I am working on we are developing React applications and we are using yarn for pulling dependencies. We are using a private registry from where we are pulling npm dependencies and we are also using a private artifactory via jFrog to pull and publish common components like buttons, plots etc.
So far with the private registry we do not experience any problem while we were working with yarn. We used npmrc file locally on our repository to setup the registry from where we are pulling dependencies.
Now we have to add a scoped registry pointing to our private artifactory. So my npmrc file looks like that:
registry=http://private-registry/npmjs-group/
loglevel=http
strict-ssl=false
#scoped-name:registry=https://private.artifactory.com/artifactory/api/npm/shared-components
So, when I am using npm install the dependencies coming from artifactory are fetched behind http http://private.artifactory.com/artifactory/api/npm/shared-components
However, when I am using yarn install with the previous npmrc I get the following:
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "http://private.artifactory.com/artifactory/api/npm/shared-components/#scopred-name/icons-0.1.0.tgz: connect ETIMEDOUT 146.106.239.15:80".
I tried to set up proxy,https-proxy config setting on npmrc but I could not make it to work. I did something like that:
proxy=http://private.artifactory.com/artifactory/api/npm/shared-components
https-proxy=http://private.artifactory.com/artifactory/api/npm/shared-components
I am not sure if those settings are appropriate. Or is another issue.
I tried the same approach with the same failing results by using yarnrc.
In addition, I saw this open issue on jFrog https://www.jfrog.com/jira/browse/RTFACT-12703.
It seems that jFrog is not supporting YARN is it true?
I would be really appreciated if someone from the open community can give some light here.

Related

Embedding react application's build into Drupal

Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.

Is there a way to use create-react-app offline

I would like to know if there's a way to use create-react-app offline rather than have it download files from the internet everytime. Doing this, seems like a huge waste of bandwith, and time, as internet speed is very slow and expensive where i reside.
Now there is an NPM package for that it called create-react-app-offline
Installation :
npm i - g create-react-app-offline
Usage :
crao -n <app-name>
For more informations on GitHub
Every-time you do npm i, it also checks for updated packages and updates your package.json . The app can be made offline but your node modules will be downloaded ( they are added to git ignore) if you upload them to git.
If net is really an issue there then I'd suggest getting a pen drive or something where you can upload your files and access them without re-downloading
I found a npm package called create-react-app-offline which initializes the react project offline. And I checked it myself.
Here's the link
Create React App Offline Package
Just install it globally and run the crao -n <app_name>

Unable to resolve "./aws-exports" from "App.js"

I have been building an app with awsamplify for quite some time now. Today I descided to run some test and when I did
npm run start-web
Everythin worked fine. Now I went on to run mobile test with the use of Expo and ran
npm run ios & npm run android
which both returned the following errors.
Unable to resolve "./aws-exports" from "App.js"
Building JavaScript bundle: error
my problem is similar to the one below just its amplify and not awsmobile
https://github.com/aws-amplify/amplify-js/issues/669
Deos anyone know what I can do to resolve this?
Thanks alot!
I jsut removed some unused imports and the error changed to this
Unable to resolve "#aws-amplify/ui/dist/style.css" from "node_modules\aws-amplify-react\dist\Amplify-UI\Amplify-UI-Components-React.js"
Barely mentioned in the AWS docs:
For setting up a local dev folder, from an existing amplify repo, use an amplify env pull,
It will "pull" the ./aws-exports.js from the server, the latest one that was pushed there,
similar to git push and git pull but for the amplify env
It's true that an amplify push will create the ./aws-exports.js file,
but it will also "push" it to the server, overwriting whatever is there.
amplify status is also a handy command, similar to git status
I ran amplify env pull
and then found it in the ./src/aws-exports.js
not sure if the pull did it, or if it was always there but this is for an existing expo project
Confing your projects, using terminal go to the main folder and amplify init to config your project
amplify init
Do you to use an existing environment? (Y/n) Y
Choose the environment you would like to use: dev
Choose your default editor: Visual Studio Code
Choose the type of app you're building: javascript
What javascript framework you're using: ionic
Source Directory Path: src
Distribution Directory Path: www
Build Command: npm run-script build
Do you want to use an AWS profile? Y
Please choose the profile you want to use: select your personal IAM profile

ReactJS, create-react-app gets an error

I run from my console the "create-react-app practise1" command but it gets an error.
I couldn't understand why. Can you help me?
Normally I used it before as "create-react-app react-complete-guide" and this command had worked at that time.
I share all the codes that i get as screenshot.
Thank you,
My Console screenshot
You should probably have text like this in your error:
error Received malformed response from registry for "timed-out". The
registry may be down.
Currently part of NPM is down. https://status.npmjs.org/
Identified - Several packages including "require-from-string" are currently unavailable. We are aware of the issue and are working to restore the affected user and packages. Please do not attempt to republish packages, as this will hinder our progress in restoring them.
Jan 6, 19:45 UTC
This isn't a problem directly with create-react-app itself but one of it's dependencies it needs, require-from-string. And that issue is coming from the npm registry itself, and temporarily, not create-react-app. See this about the npm registry status and this issue from create-react-app itself:
What you can do, is if you have another project bootstrapped with create-react-app, you can copy it and make changes as neccessary for starting a new project. Or - you can wait until this issue from the npm registry is resolved. This is what happens when modern projects take a large number of dependencies - if a few of those dependencies aren't available, the whole project can have problems.

Satis build tells that Authentication failed

I am preparing private package repository using satis. We are using git for versioning our source code. When I use credentials in repository address everything works well, packages.json is where it should be with proper content. But when I remove these credentials and try to build packages.json via
php bin/satis build config.json web/
I get
fatal: Authentication failed
which is understandable. I want to ask is there any other to authenticate to git repo from satis without keeping plain credentails in packages.json? I only add that I can't access repositories via ssh.
Problem solved. I have to use .netrc file and store my credentials there. Everything works like music now.

Resources