I created a ASP.NET Core app with React as per the tutorial
https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022
When I try to publish the app, it creates in my project folder under obj\Release\net7.0\PubTmp\Out\wwwroot\ a copy of every single file on the entire drive where my project lies. And then I get errors that the files paths are too long because it is trying to copy stuff that is in the recycle bin.
enter image description here
Is there another way to publish this? Easy to publish the backEnd web API app, but how do I publish the FrontEnd
Related
I am trying to alert users when there is a new version deployed in my react app. Here I am using webpack to bundle our modular application which yields a deployable /dist directory. Once the contents of /dist have been deployed to a server, clients (typically browsers) will hit that server to grab the site and its assets. I am using caching techniques as mentioned in https://webpack.js.org/guides/caching/ and for each deployment, I am getting new content hash id.
I need something similar to the below screenshot where the user gets a notification to refresh the page. Is there any way you guys can help me out in this?
We now have two applications with two differents git respositories. The first one is in ReactJS for the front and the second one is in C# (Web Api 2) for the back. When we want to deploy on Azure, we build the front and we copy the output files to the c# project (web api project). We deploy the web api application from Visual Studio in Azure thanks to the deploy menu.
It's a little bit boring and sometimes we have errors when we change by hand the parameters relative to our differents environments.
We would like to automatize all these tasks with Azure Dev Ops. Have you ever done this kind of stuff ? And how ? Sorry, if this question seems stupid but i can't find a tutorial to build when the front and the back are not in the same git repo. Thanks in advance for your help.
You can follow below steps to build and deploy your application. I can only give a general idea and steps. The main idea is to get your front and backend source code together and build them in the same pipeline. The configurations and parameters for each tasks in the build pipeline need you to specify according to your project.
Below steps is shown in classic view pipeline. Check here for yaml view pipeline
1,Sign in to your Azure DevOps organization and navigate to your project.
2,Go to Pipelines, and then select New Pipeline, and select Use the classic editor to create a pipeline without YAML at the end of the page.
3,Walk through the steps of the wizard by first selecting as the location of your source code.
4, select a source to specify where your code is located. And continue to choose a template, here i choose ASP.NET Core(.NET Framework) template.
5, Add a powershell task to the top of your pipeline(the tasks can be drag and drop to reorder) to run the git commands to clone your front react.js code into same source folder of your backend c# code.
If your code is hosted in azure repo git. You can add below scripts in your powershell task. Make sure Allow scripts to access the OAuth token is checked
cd $(Build.SourcesDirectory)
git clone "https://$env:SYSTEM_ACCESSTOKEN#dev.azure.com/{yourAzureorganizationName}/{yourProjectname}/_git/testrepo"
6, add npm install task and npm custom task to build your react.js, You need to specify the path of Working folder that contains package.json to the folder where you cloned your reactjs code in the above powershell step. you can check steps here for reference.
7, Add a copy file task before task Visual Studio build to copy the output files from building react.js to the your c# project.
8, Configure the necessary path and parameters for Visual Studio build
task and Visual Studio test task to build and test your backend c# code.
9, Add an Azure App Service deploy task at the end to deploy to azure.
You might need to add other additional tasks to build your projects. You can also move your deployment task to release pipeline.check here for more information.
There are lots of examples and learning materials that you can find online about how to create build pipeline and how to deploy your application to azure. I suggest you can follow one example to create your build pipeline for c# project and try to edit your existing pipeline to integrate your react.js project.
Here is microsoft official documents for you to check it out. Hope you find above helpful.
Here, you can find the steps to build and release two web apps (hosting web api) and the relative front developed in ReactJS. Here's our goal :
In Azure devops, we've created a pipeline using the classic editor :
We selected our git repository and this template :
After a step of creating tasks, we obtain :
We'll describe some of these tasks. For example :
/p:SkipInvalidConfigurations=true /p:DeployOnBuild=true /p:WebPublishMethod=FileSystem /p:publishUrl="$(build.artifactstagingdirectory)\appRetailLab" /p:DeployDefaultTarget=WebPublish
Once you've build the two web applications, you've to copy the front files in web applications. There're two tasks for that :
At last, you publish your artefacts in the drop directory within the build.artifactstagingdirectory :
The release :
Our release is not too difficult :
We use 4 tasks :
Replace Token is a very usefull plugin. You can replace a token (defined by a template) by a value defined in the release. We use this plugin to replace our token in the front part of our applications (js files).
To add token in our reactjs application, we use dotenv npm package.
For the web.config parameters don't forget to check XML Variable substitution in your deploy task.
That's it.
I am new in react+redux. Recently I got a task and have no idea.
Is it possible not to use any web server to run my react+redux project?
After building my project, I got a folder of static files.
Is it possible to place those in CDN not having web server eg. nodejs or tomcat?
thanks.
If you do not need save data on server - you do not need it. Take a look on GitHub pages for sample.
Of course you can but you need an HTML page to be parsed by the browser, in which you would include the necessary SCRIPT tags to load and run your React app.
I recommend you give Surge (https://surge.sh/) a try, it's free right now and you can easily host your React project with ease (including the .html files and every asset generated by your build). You can even create a npm script that builds and then deploys from the CLI with a single surge call. Works like a charm!
You can even use a custom domain name, or choose a specific surge subdomain if it's available, like gibbok.surge.sh. ;)
No it is not possible without a webserver.
If your app is a static website for example, with no server functionalities (like nodeJs) you could host your builded application (static files) on any simple http server included github pages without setup a nodeJs server.
If you app has some dynamic functionalities, example it use nodeJs to work with server file system or db, you need a node server.
In both cases a http server is necessary to delivery JS/HTML and assets to the browser when requested.
On a CDN you could store some static files, which can be used in your project, which is great if you are building a js library.
In case you do not want to care about the http server you could use any simple hosting solution, example GitHub page, or any hosting which allow running a website with some static files.
I'm developing a web application in which I want to insert users and be able to display files that they upload via a search option. I can get all of the logic that I need sorted and the files uploaded into the correct directory. However, if I insert a new user into the db, the web app cannot find their file in the directory until I restart the server.
How can I make it so that the resources directory of my web app automatically gets refreshed by the server? I'm developing in Java/JSP and using Tomcat as my server.
Thanks!!
I'm guessing you're putting the files into the src/main/resources folder, then it's being packaged into the artifact and then you access them as the classpath resources. Then the next portion of the resources is going to be available after the next packaging.
Instead you should access the Files via usual File System and Absolute or Relative paths.
I am working on Restful Web application. I am maintaining different project for web client code and Google app engine server code.
When ever i made changes in the client code, i rebuilt the client code and places inside the war folder of server project through build scripts.
Here i dont want to place all files directly to war folder and i wanted to put them under folder called 'Publish' for better maintainence. How can do it?
Is there any better way to maintaining client code and Google app engine server code?
The structure also works well for Mobile application in future.
I am still new to this too, but there is versioning. If you change the version number in your project manifest file, it does not become the default (i.e., visible to your original public URL). It is public and accessible for you to test. When you are ready to "publish" just switch the new version to be the default. Use the Manage section of the Dashboard and set the Version to be the default when you are ready.
To test any of the earlier versions, you access through the Manage and click on the specific version. I don't know if the persistent storage is versioned with this same mechanism -- I can image problems if you have a huge DB.