How to copy react build files in a web app with azure pipeline before release? - reactjs

I set a build for a react web app in azure devops and another one for a web api application (c#). I would like to copy the output of the react build in the web api project before release them in Azure. I tried with a copy task but i failed due to the web api application output (it's a zip). Help would be very appreciated.

On the project I'm on right now, this is solved by
1. building the front-end before building the web app project, and
2. including the react-output-folder in the visual studio project, but using a wildcard, not each file:
<Content Include="webstorybook\*" />
By doing that, the files should be included in the published .zip file. Hope it works for you, too.

Related

Unable to resolve downloadable font errors in ReactJS front-end application built using Material UI deployed in Azure App Services ASP.NET V4.8

I have developed a ReactJS front-end project, built using Material UI. I have built it using npm run build command and deployed the application in Azure App Services ASP.NET V4.8 stack.
Everything looks fine but I'm getting a minor error. Downloadable font: download failed I can see these woff2 files in the artifacts and even in the App Service as well.
Any help in understanding this issue is much appreciated.

How to Debug Dotnet Backend + TSX Frontend?

My Problem:
I recently became the new Dev in a system which has a backend with Dotnet 3.1 and a Frontend of React, TypeScript and it is build with Yarn.
I can run the whole monster. For this, I first build the frontend, copy the created .js files to a static files folder in the backend, and run the Monster.dll.
How to debug the frontend? (I am afraid it relies on the backend being available.)
So far I tried to use Visual Studio but I'd try anything that is free and runs on Linux.
Seems you confused the front-end environment with the back-end.
Basically, your React front-end application runs on browsers whereas dotnetCore application runs on CoreCLR. Meaning that you can debug your React front-end application in browser's Developer Tools in a basic way.
Ensure that the build operation of your React front-end app generates source map (*.map) files. These files map your browser compatible js output files to the tsx / ts sources. Then you should be able to debug it on your browser's Developer Tool.

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 do I get my angular app on my hosting to view as a web page?

So I finished the Tour of Heroes tutorial. I understand it and can alter and have fun and what not. Got a git repository from Visual Studio Team Services for the app. Now here is where I'm lost I just want to build web based apps for now. How do I get the app on to my hosting to display as a website. I can't seem to find any tutorials (or once that I can understand) online for this.
If anyone can help with this or point me in the right direction it would be greatly appreciated.
Thank you
You can refer to these articles to deploy angular app (part 1 and part 2).
Simple steps:
Use NPM and gulp build tasks to build and package your app
Deploy package to azure or IIS.
There is IIS Web App Deploy task in IIS Web App Deployment Using WinRM extension, so you can install this extension and deploy packaged app to IIS if you want to deploy app to IIS.
Your hosting provider probably gave you a FTP access to a root directory for your website.
Upload the project over there and make sure there is an index.html file there, that pulls all the relevant JS files into place.

rename the cobertura.ser file in tomcat/bin when i deployed my web application in tomcat

i deploed my web application instrumented with cobertura through war file in tomcat 6,it works well!
In th path tomcat/bin i found d:/dev/../module1/target/cobertura/cobertura.ser,normal according me.
Now i want know,how can i rename this file(d:/dev/../module1/target/cobertura/cobertura.ser) to cobertura.ser automatically when i deploy the web application
PS:my web app is multi modules web app.
thanks for answers!

Resources