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).
Related
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
I have an existing MVC project built with Yii2 (a PHP framework) which generates and serves HTML pages.
I'd like to write just one complex Component (with 3rd-party modules and a lot of other dependencies) only for a page (generated by Yii2); so it's important to clarify that I don't want to leave all the frontend side to ReactJS and I don't want / can't migrate to a complete frontend app managed by ReactJS.
What's the best way to integrate ReactJS (with its stuff like npm, Webpack, etc)?
Should I write the ReactJS app in a "npm environment", bundle everything and include the "build" static resources into the Yii2-generated page?
For complex scenarios it is better to use "npm stack" to build your assets and create asset bundle to only register files generated by tools like webpack or gulp. Yii tools for compiling and compressing assets works fine for simple cases, but they're very limited when you compare it to tools from npm ecosystem.
You could look how official website of Yii Framework was build: they used yarn and gulp to build frontend assets and one simple bundle to register generated files. The main difference from normal "npm fronted flow" is that they used assets-packagist to install frontend dependencies.
First of all, my question is not about how to install angular. I'm just getting started with this framework and already got a question right at the beginning.
Usually I create new web projects (HTML, PHP...) in the default web folder of the apache webserver (/var/www/). I did this with angular too under /var/www/firstAngularProject, but it seems the application itself is only accessible on its default port on the webserver root. In my case this is localhost:4200
When I try to open the path in my browser localhost/firstAngularProject I see the index structure and I think this could become a security issue.
So my question is where should I install the angular project or what is the usual way to install it?
When you run Angular using the cli command ng start (which I assume, based on you describing using localhost:4200) you're running the application using webpack-dev-server. This is undesirable since it's only meant for use during development, not for production.
In production Angular works just like any other frontend framework. You build the application with ng build --prod which produces a number of build artifact (in the /dist folder). These artifact are simply static files you make available through some webserver, in your case Apache, by copying the content of the /dist folder to /var/www (or whichever is your default web folder) and that's about it.
I am trying to create module within an existing multi-module maven project. This module will require Grunt, Bower, NPM, Angular JS, bootstrap among others. The output of this project (after the build is done) are static resources (fonts, js-files, application-js, application-css).
There is a separate Web module within the project that hosts the Web-Application portion of the Application.
I need to accomplish the following
Ensure that Maven can kick of the build of Grunt/Bower based UI Module.
Ensure that this module can be plugged in as a dependency for the Web Module.
So far, I have been able to figure out how to include a UI module as a dependency for a Web Project (via WEB-INF/lib/ui.jar...servlet 3.0 spec related).
Question:
What should the structure of the project be like to ensure that I don't copy unnecessary files into the JAR (like package.json or node_modules folder)?
Is there a way Maven can do an incremental build on such a project?
I am finding it hard to reconcile the two different project structures due to my own shortcomings I guess.
I have a basic Angular app installed using a Yeoman fullstack installer, and I can see the basic pages running on http://localhost:9000 when I run 'grunt serve'.
I also have a Vagrant installation running using the ubuntu/trusty64 box. I was originally seeing a 404 when trying to view http://127.0.0.1:4567/, but following some instructions I found online, I edited the file in 'vagrant ssh' at /etc/apache2/sites-enabled/000-default.conf by removing the html part of the path in that file. After doing 'vagrant reload' I now see the list of files in my project dir when I go to that URL.
How do I go about viewing my angular app like it is at localhost:9000? If I get this working will this mean that if I share via Vagrant, they'll see the angular app running as it should? Do I still need to be running grunt serve in combination with Vagrant?
I'm pretty new to all this setup, so I'm just following the instructions at https://github.com/DaftMonk/generator-angular-fullstack & https://docs.vagrantup.com/v2/getting-started/index.html
I'm not great with Linux/cmd line stuff as yet, hence my problems... :)
Thanks!
I started writing instructions for you on how to get it done. But then realised that you are not very comfortable with linux commands. I have created a angular-seed project that uses vagrant, angular and requirejs. Its easy to set up and I have written instructions on how to do that in my github page.
Just clone it, follow the instruction and you will have a working seed project in no time. Some of the features of the seed are:
Uses vagrant and puppet to provision the vm. All required dependencies are automatically installed.
Grunt tasks for:
autoloading bower dependencies
compile sass or scss
livereload
server for access of site locally
If you have any difficulties or questions, feel free to contact me.