How to make edits to a deployed react app? (Netlify) - reactjs

if you have already deployed a build to Netlify by dragging your build files over & you want to make an edit to the site, do you just delete the build file in VScode, make the edit & create a new build file and drag that back into Netlify?

Login into netlify and go to the particular sites that you have previously deployed and in the deploys section just drag and drop the new build file

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!

Adding React app to existing folder on GitHub

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

How to host a sample React Application in Sharepoint online?

created a sample react application which is running in localhost:3000. Now i need to host the same react application in sharepoint online. Any solutions to this.
Please check the steps in the blog below:
Build And Deploy The Client Side Web Part (SPFx) In SharePoint Online
1) Once you are done with the your local development, we need to configure a CDN path where we can host our files.
Go to the config > write-manifests.json file.
Here, enter your CDN path. It should be a path that can be accessible by the end users. It could be Azure or SharePoint or any thing else.
Modify it as below (sample code) and save the file:
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": ""
}
2) Now, you need to generate the files to be deployed.
For that run the below command:
gulp bundle –-ship
After this is done, you will find the a temp > deploy folder inside your solution as below:
Once this is generated, upload all the files inside the deploy folder to your CDN or Site Assets (as in our case). This task can also automated using advanced gulp tasks.
3) Now, we will create spapp file to be uploaded to app catalog.
For that, run the below command:
gulp package-solution –-ship
This will generate an sppkg file inside sharepoint folder as below:
Upload it to the app catalog. SharePoint will show you a popup and ask you to trust the client-side solution to deploy.
Click Deploy.
After that, you can add it like you add an App in a SharePoint site.

How to deploy my Laravel React project in production status

I currently now deploying my project to our server, before i do the deployment I have step to do before i send it to our server.
First on my cmd I type npm install composer.
Second on my cmd I type npm run production.
Third i check first my project to determine if the status of production of react logo on the top of browser turning to blue in which finally my project now on production.
Finally I zip my files and send it to the server.
Those are the scenario that I do before I deploy my project in production mode.
however in my case I have problem when i browse my application URL. ex. www.mylaravelreact.com the directory of my files is shown to my application.
I read some question regarding problem about why does my site say index of and list my files https://www.webhostinghub.com/help/learn/website/website-help/why-does-my-site-say-index-of-and-list-my-files
In my Root Folder i have server.php
In my Public Folder i have index.php
Why does my site look this when i open it.

Run projects on github locally

I need to check drag and drop feature in angularjs .
Any idea how i can run the following project locally on my system.:https://github.com/marceljuenemann/angular-drag-and-drop-lists
Download the repository & then extract contents of the folder & navigate to the following folder: angular-drag-and-drop-lists-master/angular-drag-and-drop-lists-master/demo/ and run index.html and you are good to go. Same is with cloning repository.

Resources