I have one project with asp.net core server and another project (which one supposed to be nodejs for azure server, but I don't need server part) with my react (cra) app. I want to be able run npm install and npm run build every time before publishing. For now, I solve this problem by using post build action. But this runs only if files is out of date. Changes in folder with my react app is not enough for visual studio to rebuild. So i need to manually run rebuild every time I want to publish changes in my react app. Is there more correct way to publish react app separated from backend, from visual studio to folder on aws?
Follow the same as you were upload any other app is very simple.
https://learn.microsoft.com/en-us/visualstudio/deployment/quickstart-deploy-to-azure?view=vs-2017
You could set up automatic deployment from a Github repo. I have it set up so that everytime I push code to the master-branch on my Github-repo it rebuilds my app and publishes it.
Here's a guide on how to do it: https://blog.github.com/2015-09-15-automating-code-deployment-with-github-and-azure/
If I'm honest, I find this approach to be easier than having to publish manually. Also, all I need is Git.
Related
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!
Created a new app in VS2022 from tamplate:
Everything runs fine locally and I get the Json payload successfully (fetch-data).
However, when deployed to Azure it does not. It looks as if routing does not work for some reason.
I've tried different suggestions here:
React JS App Routing Issue Only After Deploying to Azure Web App
React routing not working in Azure website
https://social.msdn.microsoft.com/Forums/en-US/836324ff-2893-4eca-828d-0ac47f8fc5bf/azure-web-app-service-react-routing-amp-deploy-problem?forum=windowsazurewebsitespreview
Azure Configuration: Tried nesting wwwroot, that didn't work either:
Error:
Please help
I have followed the steps you provided, and the demo application works well in my side. And I think your app service is normal, the issue should be related to publish file.
Test Environment
Microsoft Visual Studio Enterprise 2022 (64-bit) - Current Version 17.2.4
PM> node -v
v16.15.0
PM> npm -v
8.13.2
I know it works well in your local now, and please follow my suggestion to try š.
Troubleshooting Steps:
ā ļøUpgrade your visual studio 2022 to the latest version, and also update npm and node.
Please create a new azure app service(.Net6 LTS), you can delete it later. We don't need do any setting in this app.
Create a sample project in VS2022, and test it in local, make sure it works well.
The above steps ensure that the VS environment is up-to-date and the app environment is initial.
Publish this demo project
Check the kusu site. url like: https://app_name.scm.azurewebsites.net
Check the publish files. My demo create by template, have contain 1 wwwroot folder and 9 files.
If you still want to figure out what's wrong with the current app, see the introduction below.
Delete all the settings, make app service is clean. It means you can access the site like your second pic contains loading....
Find the web.config file and change stdoutLogEnabled to true.
Back to the azure portal and enable detailed error messages.
Restart the app and back to kudu site, and remember to refresh kudu site.
Looks like I was using an old template that came with VS2022. I updated my VS version, created a new project from template and noticed this line was added in Startup.cs (in this new template):
endpoints.MapFallbackToFile("index.html");
and also this:
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
Now my app works in Azure as well. Thank you
Really new to web dev. so forgive me if this is a simple issue...
I want to host a React application on Microsoft IIS. This application makes server calls: this is the project I am trying to do https://www.twilio.com/blog/react-app-with-node-js-server-proxy)
What happens when I link the build to IIS is that I'm able to type something in the form, but I'm unable to see a response from the application (the fetch call is being made but is failing and nothing is returned). When I run npm run dev in the project folder the form works as it should, so it appears that the server isn't being hosted(?).
to deploy react application in iis follow below steps:
1)run below command to build the site:
npm run build
the above command creates a build folder inside your application folder.
2)now open iis manager.right-click on the server node and select create new site.
provide site binding detailed and set the folder path of the site to the build folder which is generated by the command.
https://stackoverflow.com/a/60110712/11147346
Iām working on a project. In this project, I'm creating a React user interfaces to enter data. So now, I only can run the React project with npm start. That mean I need code to run the project
Is there any way to deploy my project locally? I mean, I need a way to run the React project without use of code. I need to deploy only on my local PC.
You can do this following:
Build your react project
Use server and visit your url. ex: localhost:8887
You can use Web Server for Chrome for server.
Consider checkbox:
If you check those checkboxes, others can access your site.
I have created two apps using 'Visual Studio Code' and 'node.js.' I run them using command 'npm start,' and they show in the browser. I want to build them or deploy them so they can be used by anyone. It says there to use command 'npm run build.' How to do that, and what technique you use in order to build them?
It depends on what configuration you used for building the React app. If you used create-react-app, npm run build is the correct command for building it.
If you used a different configuration (e.g. webpack), you should use the relevant command for that configuration.
Either way, deploying it will be as easy as copy/pasting the build folder's content to the server you want to host it, after running the build command.
Visual Studio Code or any other Code Editor for that matter is not relevant. You can develop, build and deploy any React app using any Code Editor you want, it's just a matter of preference.
"Building" refers to the task of preparing (transforming, minifying, compressing, etc.) all the relevant project files so that they're ready for production (assuming that your build scripts are configured to do so).
"Deploying" an app is usually a separate task that will deploy (upload) your current project build to a development platform provider like Firebase, Netlify, Azure, etc. Note that you have to register with a provider and setup a new project on their end before your deploy your project.
Which provider you use is totally up to you. Also, you have to configure your current project once you've chosen your development provider. They'll provide instructions on how to deploy your project.
On a side note, keep in mind that you can configure your own npm scripts so that they run whatever you want. More about that here