Build several projects from one repository with Azure DevOps - reactjs

We have one Java/Spring Boot/React project hosted on GitLab. After initial development we decided to move to Azure DevOps. Project structure hosted on the GitLab and in local folder structure is simple:
-- Parent project (parent folder)
------- First Spring Boot Project (built with Maven, produces JAR1)
------- Second Spring Boot Project (built with Maven, uses JAR1 as dependency, produces JAR2)
------- React project (built with NPM, produces static pages)
I need to setup separate build process for React and for Spring 1 and 2 projects.
In Azure DevOps there is selector for build from specific branch but I don't see how can I set pipelines to build project from specific folder?

When you use Maven task to build your Spring Boot Project, you need to specify the path to your pom.xml file by changing the value of Maven POM file field. The file path value should be relative to the root of the repository, such as IdentityService/pom.xml or $(system.defaultWorkingDirectory)/IdentityService/pom.xml.
Here is the document about Maven task.
When you use npm task to build your React project, you can set the working folder that contains package.json. Please select the folder instead of the file when you set the working folder.
Here is the document about npm task.
In addition, you may also need to set path filters in Continuous integration (CI) triggers. Here is the document about CI Triggers.

You have path filter:
# specific path build
trigger:
branches:
include:
- master
- releases/*
paths:
include:
- docs/*
exclude:
- docs/README.md
Please check documentation here

Related

Azure pipeline Command Line Script error showing - mv: cannot stat No such file or directory

I'm using sample template project of ASP Dot NET MVC Core and inside the project React was installed. I need to deploy this project to Azure using CI/CD Pipelines.
I can able to success all jobs except command line script. In command line script job, just want to move my react "build" folder to "wwwroot" folder for navigating react index page.
This is the tutorial I've used.
Package.json
Code Structure
Repos
Pipeline - npm build
Pipeline - Command Line Script
Command Line Script
According to the blog tutorial, you are not successful because the blog is not talking about SPA.
He created two projects using two commands. I have personally tested and found that when using VS2022 to publish a SPA project, the project structure is as follows.
We can find that after the release, the React project in ClientApp will be automatically added to the wwwroot in the Asp.net Core project after compilation.
So I think, if you use two separate projects, like in the blog, then we need to use mv command to copy the file content.
If we are using a SPA project, the same project you created now, you can omit these steps and publish it normally.

How to build react application (with multiple environments) that runs on Apache

Typically deployment process: You build once
In Java or any other programming language, you build your application once and then deploy to various environments. There is like .env or .properties file which has environment configurations that are loaded when application starts.
How does react work
In react, from my understand there is package.json. So, it uses it to do build. OUr package.json has following content:
"price": "http://11.222.111.122/myApi/pricing",
"teacher" : "http://11.222.111.122/myApi/teacher",
"mainbanner" : "https://11.222.111.122/myApi/mainbanner",
We running build the application and run on Apache server (not on node.js)
Question:
a. How can we have environment file so that we can specify to use above urls at time of starting application.
Obviously, we have different urls for different environment.
Navigate into your React project folder using Terminal or CMD and build your React project using command:
npm run build
Then a build folder will be created inside your React project which will contain the final production files. Just upload those files into www or public folder of your Apache server.
If you want use it as subdomain, upload it to your subdomain folder.
Remember that React built version works like other Javascript web applications at the end.

How to publish Angular project?

I maked angular project. I used this generator:
https://github.com/swiip/generator-gulp-angular#readme
I have serwer and domain. My question is: How publish this working project on serwer? Should I use Apache http?
Since you used Gulp, you can check its docs to find out exactly you can build your Gulp application and deploy it to server.
On your command line run this in your working directory of the app
gulp //to build an optimized files to be deployed on to the server
Now in your dist folder in your root of your working directory, you'll find all the files and folders that have been created by gulp task default.
Now you can deploy this on with Apache or node or Nginx or any other server you want. Simply paste all the files to the to the
path/of/the/root/on/server
You can also preview your app the browser and watching for files changing and auto-reloading the browser to review changes by running
gulp serve
More grunt tasks here.

How to set up build with git-hosted external frontend project included?

I have a Play 2.2 Application which strickly used only to implement REST API.
I have in an independent GIT repo a AngularJS application. This application uses Grunt and NodeJS to do the build.
The Result of the frontend application is an index.html + 1 js file and 1 css file.
Ideally I would like to invoke the Grunt build script from SBT which builds the angularjs app.
Is there a SBT plugin I can use to do this ?
What is the best approach I should use to do this the most simple way ?
At the moment I build it manually and copy the static resources into my PLAY's public folder.
Thanks in advance
I've never done it before, but a quick Google search gave me sbt-grunt-plugin whose the last commit was authored on Feb 20, 2013 :(
The plugin is a bit outdated, but is doing what I'd propose -- offers a command (could also be a task) that wraps grunt (as the plugin above does). You may also want to read the official documentation of sbt about Commands.
I would then declare a dependency on the angularjs/frontend project using RootProject for the root project with frontend (angularjs) and backend (Play Framework) submodules - see How can sbt pull dependency artifacts from git?:
lazy val frontend = RootProject(uri("git://..."))
lazy val backend = project ...
The root project is auto-created by sbt as described in Default root project:
If a project is not defined for the root directory in the build, sbt
creates a default one that aggregates all other projects in the build.
frontend would need to have build.sbt with the task created and it should work fairly well (it might be the only viable solution to not tie the projects too much and create unnecessary inter-dependencies).

How to convert maven project to web application project?

I want to convert a maven project to a web application project, which should contain web.xml. I am using eclipse juno 4.2 with m2e (maven integration for eclipse) plugin software.
Any reply would be appreciated.
Install m2e-wtp
In your pom.xml, change or add the war packaging
right-click on project > Maven > Update project
m2e-wtp will create the src/main/webapp folder and add the Dynamic Web project Facet¤
manually add a WEB-INF folder under src/main/webapp
right-click on project > Java EE Tools > Generate Deployment Descriptor stub
It will create a web.xml under src/main/webapp/WEB-INF/
¤ By default, the web facet is set to 2.5. You should update it, if needed, under project properties > Project Facets BEFORE generating the web.xml
I assume your current project is a maven project which produces jar. Please confirm.
I have not come across any utility which can convert a jar project to a war project.
You have following two options -
Simple open the pom.xml and change jar to war. Create folder webapp under src/main and create a web.xml
Create a new web app project via maven command line choosing webapp archetype or via eclipse choosing maven webapp achetype. Define dependency to your jar project.
If you can provide more information based on my suggestion then probably I can help.

Resources