Adding React app to existing folder on GitHub - reactjs

I have a group of projects that I've been compiling on Github as part of the Frontend Mentor challenges - https://github.com/MikeBish13/frontend-mentor-challenges
These are all stored in the same folder locally on my PC and every time I add a folder, VS Code recognises this and queues that folder up to be committed and then pushed to the Github folder.
I've just created a new React App via create-react-app and have added that to my folder locally on my PC and I now want to add it to the folder on Github, but VS Code is not recognising it as a new folder and won't let me commit, and then push changes.
Does anybody know how I could do this? Are there settings I need to change in the React project?
I've run npm build on my React project, if that makes any difference, but I've not changed or added anything new other than the initial create react app.
It's probably a simple answer but I'm a novice when it comes to React/Github.
UPDATE:
Here is a screenshot of my folder structure

Related

How to Host a React App with 3D .gltf files?

I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!

How can I setup a react project in local with files I downloaded from server?

I want to setup already created react app in my local for further updation. I only have files uploaded to the server public_html.
Directory view
You can view the files in my root folder here.
Is it possible to setup react project like that. If so someone please help.
This command should work if everything is set up correctly and you have all the requirements installed locally. npm start

pushing whole react folder to github

Im new with git stuff. I wanted to push my react project made with "create-react-app" into github and make it work with github pages. So i followed some tutorial and it basically worked so i could preview it on a github page. But now i want to push whole folder of my react project instead of only files. To make it working i deleted .git folder inside my app folder and initialized one outside. I ended up pushing it to my github repo but i cannot live preview my site for some reason.
https://github.com/Adrian397/react_projects - here is how it looks like (there is main folder in master branch)
This is how my package.json looks like.
I dont know if the "homepage" is written properly but i tried to change it to "homepage": "http://Adrian397.github.io/react_projects/expenses" (react_projects is my whole repo and expenses is my folder that i pushed into github) but still did not work.
Is there any other way to do it because it is kinda weird if i had to create a new repository for every react project instead of having them separeted in one global repository?

How to show my React app to the others from GitLab?

Hi everybody im actually working for a company and they are asking me to show them my React Website while im working on it. They have a website that is connected to our GitLab Project and if i type http.websitename/folderOnGitLab it actually comes out whats inside the folder but with react it shows the code , not the website , because the only way i know how to open react app is by "npm run start" from local, i dont really know how to "append my app in that website from GitLab" . I have already pushed all my React App but i dont really know how to make that visible to everyone as a website not only as a code. The website is a website they host so is always online and is connected to the project as i said. So i kinda have all the material but dont know how to make that work. For example i have pushed Test.txt and if i type website/Test.txt it shows the inside of it , so the website works.
It depends on how your app was set up, but probably you need to run npm run build, which will package up your app to be used on a production website.
This will be in the /build folder, the contents of which can be hosted online.
I'm not sure how you've managed to get that folder working on that website, it definitely isn't best practice to have all the code hosted online like that, but for a temporary solution you can just go to http.websitename/folderOnGitLab/build and it will probably work.
In the future you want to copy just the contents of the /build folder to be visible on http.websitename/folderOnGitLab.
Edit: The /build folder will be excluded from git, don't put that on GitLab, just the other source files, as you can re-generate it any time by running np run build
You can try using heroku. Once you push to heroku, it deploys your code and provides a url which you can share. It's free.
https://blog.heroku.com/deploying-react-with-zero-configuration
Are you using gitlab pipelines?
If yes, you can configure ngrok in one of your jobs.
If someone wants to see your work, this person just need to play the job that have the ngrok tool and it will receive a custom link with the application.
To stop the app, you just need to click in the cancel button

Node.js Express Angular app not affected by file updates

I have a very simple Node.js/express app that I built using the tutorial by Traversy Media here: https://www.youtube.com/watch?v=uONz0lEWft0
During the build process, I would make updates to the .ts and .HTML files in the components directory and the web app would reflect the changes. I've since uploaded the project to github and cloned it to a new MEAN stack on Ubuntu. Now, when I make changes to the component files and the angular-src directory, the app is totally unaffected and continues to run as if no changes were made to any of the files.
I've tried to start and restart Node.js but I feel like the app is compiled or "built" now and is no longer referencing my files.
How do I get back to the point where I can further develop this app?
github link: https://github.com/negativepitch/Mean-LoginApp
First don't upload node_modules.That's why you have package.json ;)
Then, have you tried to execute npm install ?

Resources