How to add React to an existing Electron app?
I have a CLI Node.js application to which I'm intending to add a desktop GUI using ElectronJS and React. I now have succesfully combined the original CLI app and Electron so that when I run npm start an Electron powered window pops up and the old app starts doing its thing. Is there an easy way to add React to the stack or do I need to start my project over with this new architecture in mind?
Now when I go to the root directory of my project and try to npx create-react-app it refuses to initialize because there's already stuff in there. If I create a new subdirectory to my project in which I would then initialize the React app then I'd have node_modules, package.json etc. duplicates and a weird layered structure which probably isn't the recommended way to go about if it would even work...
Create a subdirectory and run create-react-app there. Afterwards, just move the contents up a directory and delete the empty directory.
Example:
cp package.json package.json.backup
mkdir temp
cd temp
npx create-react-app test-app
mv test-app/* ..
cd ..
rm -fr temp
You can run the above commands in Git Bash if you're on Windows.
Afterwards, you will want to manually merge the package.json from create-react-app with your old one that's now called package.json.backup.
Related
I'm familiar with cloning git projects.
But I'm struggling to clone a Gatsby project, https://github.com/MunifTanjim/gatsby-theme-dox, and then run the website locally.
I run git clone https://github.com/MunifTanjim/gatsby-theme-dox
Then it downloads
I go into the correct directly, and I've tried
gatsby build
This works
then
gatsby develop
I get the following error:
ERROR gatsby <develop> can only be run for a gatsby site.
Either the current working directory does not contain a valid package.json or 'gatsby' is
not specified as a dependency
I've also tried
I also cd into the demo folder and run the same -- I get it to run locally but with a 404 error...
Is it possible to run the demo of this gatsby project?
I'm quite new to Gatsby so trying to understand by starting with a prebuilt project.
Once you clone the repository you need to install the dependencies. cd to the root of your project and run npm install or yarn install.
gatsby build and gatsby develop, like all Gatsby commands, must be run in the root of your project, where the package.json is located. Otherwise, it will throw an exception.
In your case, run the following in order:
git clone https://github.com/MunifTanjim/gatsby-theme-dox
cd gatsby-theme-dox
npm install #or yarn install
cd demo
gatsby develop #to build the site in development mode
gatsby build && gatsby serve #to build the site in production mode
I'd suggest taking a look at Gatsby commands (gatsby-cli) to understand what you are running.
git clone https://github.com/MunifTanjim/gatsby-theme-dox.git
cd gatsby-theme-dox
yarn install
cd demo
gatsby develop (you should see the main page in http://localhost:8000/) or gatsby build and when it ends run gatsby serve in the terminal (see the main page in http://localhost:9000/)
I am trying to learn building PWAs and have been reading about this concept for the past few days. The problem I am facing is; whenever create a new react app with the help of npx, it never creates a serviceworker.js file.
Files after creating a new react project
All the articles and the YouTube tutorials show that npx create-react-app is creating that file for them. I have tried to google this issue but I think I am the only one who is facing this problem. I assume I can create a serviceworker.js file myself but I am curious that why npx is not doing this for me. I have tried to reinstall everything, tried to update everything but nothing is helping.
You have to install it with a pwa template:
npx create-react-app my-app --template cra-template-pwa
Then it's in the src folder.
Make sure you have the latest node version installed for that.
I am beginner for React-App. I have an existing project folder.
Step I took:
npm install -g create-react app
cd C:\Users\MyFolder\Documents\MyName\CS50\Project\Project1
npm start
**
"This automatically create a folder called "start" inside my Project1 with folders & files below:
node_modules
public
src
.gitignore
package.json
package-lock.json
README.md
**
Actually I already have all the files inside Project1, eg:
.gitignore
assets folder
utils folder
.babelrc
.watchmanconfig
App.js
app.json
package.json
README.md
How can I delete the start folder inside C:\Users\MyFolder\Documents\MyName\CS50\Project\Project1
and I want to open the Project1 folder to work on the assignment given by a course I am attending online. This is my 1st time doing it.
Please advise.
Thanks.
Regards,
Micheale
That isn't the right way to use create-react-app.
Firstly, run
npm install -g create-react-app
Then go into the directory where you wish to create the project and run
npx create-react-app app-name
Yes, it is npx and not npm. Its not a typo.
Finally,
cd app-name
npm start
This will launch a test server and open it up on chrome.
As far as deleting goes, just navigate to the folder you want to delete with your File Explorer and Delete it.
Create React App
step 1: First you create folder "my-first-app"
step 2: Go to your vsCode and open that folder
step 3: Open terminal on your vscode and create your react app npx create-react-app my-app
step 4: Next cd my-app
step 5: Finally npm start
please don't create a folder inside folder "C:\Users\MyFolder\Documents\MyName\CS50\Project\Project1".It's not a good approach of coding
you don't have a any file use npm remove <place it your removing file>)
Removing a local package from your node_modules directory
Unscoped package. npm remove <package_name>
Scoped package. npm remove <#scope/package_name>
Unscoped package. npm remove --save <package_name>
Scoped package. npm remove --save <#scope/package_name>
Example. npm remove --save lodash
Delete and remove the react-app Files faster in a seconds using
rm -rf <nameOfTheFolder> // or name of the project
This 100% work, upvote it coz otherwise it takes, lot of time to remove using simple delete from the terminal.
Save all programmers time #GivingBackToCommunity thanks
I am trying to create a react js app, for this reason I have installed node js on my windows machine and executed the command: npm install -g create-react-app
inside a directory 'C:\Users\Desktop\ReactDemo' but the result of command created a directory at AppData\Romaing\npm\create-react-app.
I am surprise why app created in some other directory. My assumption was like if I create an empty directory and from that location in the command line, we init git then that directory becomes git flavored, isn't it.?
Similarly, I am expecting, if I create an empty directory and init react-js flavor that folder should working react-js app, but it isn't instead created a new directory. Can someone please help me understanding how to turn normal directory to working react-js directory.?
npm install -g create-react-app install globally create-react-app and it's not the command to create react app.
If you just want to create some app you could use: npx create-react-app my-app see: https://github.com/facebook/create-react-app
Additionally please keep in mind that react app created by create-react-app needs to have specific naming convention
I have this project, was created with the latest version of expo and typescript, (I chose it from the cli).
Everything works well, also I added it with the expo-yarn-workspaces package, but I have this error when I try to scan the QR code with my android phone:
In packages/app you can find the react-native code...
I haven't added any logic to this app, it's only the default template that expo-cli creates.
This problem was a serious headache. Fortunately, I think I've got the fix for you.
Check the node_modules folder of your mobile application and ensure expo and react-native are both symlinked to the workspace-root's versions of these packages. In my case, the mobile application had a second copy of react-native rather than being symlinked, which was the cause of my trouble.
Edit - More clarity:
TL:DR If your react-native and expo folders inside of your mobile app's node_modules folder are not symlinked, delete them and rerun the expo-yarn-workspaces postinstall from the folder for your mobile app, NOT from the project root. These modules should only appear in the top level node_modules folder.
Example Project structure
/MyRoot
/node_modules
/react-native
/expo
/packages
/YourMobileApp
/node_modules
/react-native -- This should be a symlink to /MyRoot/node_modules/react-native
/expo -- This should be a symlink to /MyRoot/node_modules/expo
/SomePackage
/SomeOtherPackage
Example of what properly symlinked folders look like (Windows 7)