Migrate CRA project to existing Nx workspace - reactjs

I have the Nx workspace with React and Express apps created via the official React tutorial from Nx docs. Also, I have an independent CRA project that has just one commit after using npx create-react-app command. I want to add my CRA project to Nx workspace preserving git histories. How can I do that?
I had read docs pages about preserving git histories and manual migration and then tried to migrate the project this way:
Migrated CRA project to a new Nx workspace automatically used npx cra-to-nx command as the docs said.
Added remote repository with initial Nx workspace.
Merged the branch that contained the new Nx workspace with the main branch from the initial Nx workspace.
To solve all the conflicts I accepted incoming changes (didn't change the configs of the initial Nx workspace).
The migration was successful but then I tried to serve or build migrated CRA app and got this error:
Where did I go wrong? Maybe I deleted some important configuration when was solving the conflicts?

This issue isn't really connected with migration from CRA to Nx. The problem was in the BUILD_PATH env that was in the yarn build script. I don't know why the BUILD_PATH isn't working this way, but when I write it in the .local.env file and not in the script, everything is fine.
The weird symbols rendered instead of the error message was the error message in russian. They are rendered correctly if I launch the yarn build script from the CRA project, not from the Nx workspace.
The migration approach that I tried to use should work, but you really don't need it. The approach from the Doing the migration manually section of CRA-to-Nx docs' page is fast and easy.

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.

How do I configure Typescript React App created with create-react-app to emit the files to particular directory with yarn start (dev mode)

I have a React App (Typescript templated created using create-react-app) which emits all the changes to localhost:3000 when I execute yarn start. All local changes are immediately served with hot loading.
I have another local dev server running which consumes this app's react files in /build (output from yarn build).
I would like to see all my compiled changes emitted by yarn start be consumed by another server running locally. in other words, I want the yarn to start to emit the change to my file system so they can be served.
I tried ejecting the project and changing configuration files to emit to the build directory with yarn start but that does not work.
I have also tried switching my project to https://neutrinojs.org but that may not be an option for me at moment.
Could someone suggest what approach should I be taking to achieve this.
I found the solution.
I used https://www.npmjs.com/package/cra-build-watch which serves the purpose

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

how to update a custom GitHub Pages with create-react-app as root

Hello I have read many docs online on connecting gh-pages with create-react-app. But most guides either assume that one does not already have a github pages set up, and that the react app is to be hosted as a directory (ie. username.github.io/react-app) instead of the homepage/root (username.github.io). I am hoping someone can help me out:
I have an existing repo for a github pages custom domain. It is currently hosting an older site I built with gulp and static html/css/js, and a CNAME file for custom url.
I built a new website redesign with create-react-app in a separate repo (It uses react-router for multiple pages).
I want to overwrite the contents of my old github pages site with my new create-react-app website as the root homepage.
Is this possible? If so, what is the best way to achieve this? Thanks
In the existing Github Pages app, remove the CNAME and/or delete master branch. Deleting master branch will remove the site, while deleting CNAME will clear up the custom domain back to default [username].github.io.
In create-react-app, add CNAME to /public folder.
In create-react-app, add line "homepage":"./" to package.json.
In create-react-app, run npm run build then run gh-pages -d build build process, then run npm run deploy

Setting up local development environment for Angular App with Grunt

I have access to an Angular app in a Github repo. I'm added as a contributor. The developers are using Grunt and I want to work with one of the branches.
To build a dev. environment locally- can I do the following?
Create a project folder
Clone the github repo. to this folder
NPM install //from inside the project folder - will this read package.json and install Grunt and the other dependencies?
Run grunt build
Is this the standard way of setting-up local environments? I don't want to create a branch or push anything yet.. will get to that at a later point.
Any suggestions/ advice or tips ?

Resources