I'm working on a SpringMVC project and currently I'm organising the project structure for the "client" module. I'm using the webjars and wro4j projects with are great, to organise my JavaScript dependencies and concatenate and minimise my CSS/JS code.
What I miss is something exists in the "JavaScript" world that allows to use some HTML code depending on your environment. I'm talking about something like bowerInstall task.
What I would like is to have in my JSP code:
* the includes to my JS files one by one, when working in "development" profile
* a single file, as concatenation and minification, when working in "production" profile.
Next lines are from a HTML file in a Yeoman based project:
...
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../bower_components/highlightjs/styles/monokai.css" />
<link rel="stylesheet" href="../bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css" />
<!-- endbower -->
<!-- endbuild -->
...
When the grunt task runner is executed, if I'm working in dev mode it does not much but if we are in "prod" mode all the previous CSS are substituted by a line like:
<link rel="stylesheet" href="styles/vendor.css" />
Is this possible in Java??
Is this possible in Java?? No.
However, you may try a couple of options.
Google Pagespeed - Check filter-css-combine documentation. Quick and dirty option, if you have an old project running on production.
Grunt task - Search for grunt-concat-css.
If you are using Bower and Yeoman, you would most probably know Grunt. Just hook on the grunt task to maven ( Search allegro/grunt-maven-plugin) or Gradle (Search com.moowork.grunt) before your WAR task.
this is not a comprehensive answer. Just pointers in the right direction.
Related
I installed bootstrap and JavaScript through NPM in Laravel 6 and it's working fine since i am able to use bootstrap in my web page. But whenever i am adding custom styling in resources/sass/app.scss folder, the custom styling isn't works.
You need to compile the app.scss file. Please run
npm run dev
This will compile your scss file to public/css/app.css. Now you can link the css in your blade template as:
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" />
I have read some online blogs that states adding this plugin builds Angular frontend so it would be easier to serve angular content from a spring boot path - resources/static folder. But couldn't find any example for gradle projects.
I have a gradle project which consists of modules for backend and frontend and trying to host it on same server port. I added :
compile group: 'com.github.eirslett', name: 'frontend-maven-plugin', version: '1.6'
Then ran ng build in frontend dir to build ng components. I see some.js files and following index.html generated :
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
From my understanding adding above dependency just take care of install npm and node dependencies but won't build ng components. So I manually ran ng build and the those files gets generated in resources/static directory(as I changed outputPath in angular.json). But unable to serve them from tomcat startup.
I just have 3 ng components where the main login component uri should be accessible at "/" and routing works fine and handled by angular(ng serve shows UI pages) but just not when in spring-boot path so as to deploy on same server port as backend.
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{
// empty path is the default page for app; redirects to Login component
path: '',
component: LgnComponent
},
{
path: 'test',
component: TestComponent
},
{
path: 'sale',
component: SaleComponent
}
])
My only problem is http://localhost:8080/ displays no UI(login etc.)
I mean to ask are there any additional steps beyond adding this
dependency to build.gradle in order to easily serve them?
I guess I don't know what URI to use to access frontend on 8080. Because angular routing works fine and was able to access on localhost:4200/ and from the main login page to localhost:4200/test and /sale .
Please help, I have been struggling/banging my head on this issue for sometime now.
Building your frontend application in Gradle with the frontend-maven-plugin is not relevant, because this plugin is designed for Maven, not Gradle. You may take a look at the Siouan Frontend Gradle plugin, that will allow you to trigger your frontend application build directly from Gradle. From the official website:
It is inspired by the frontend-maven-plugin.
This other answer to a similar question provides an example of how to use this plugin. Here's a minimal configuration example to build your frontend application:
// build.gradle
plugins {
id 'org.siouan.frontend' version '1.1.2'
}
frontend {
// Replace with your Node version.
nodeVersion = '10.15.3'
// Replace 'build' by the name of your script in your project's 'package.json' file.
assembleScript = 'run build'
}
Having your freshly built frontend application served by your Spring Boot backend and correctly packaged in your final archive are different problems. You'll find a working example of a Angular + Spring Boot + Gradle application by generating a demo application with JHipster and its JHipster Online service. This will also show you where the different artifacts are generated to be served either by the backend or the frontend development server.
EDIT
The plugin's homepage now provides some usage guidelines, that may help 'packaging' a frontend and a Java backend together.
The plugin seems a bit outdated.
I am using the gradle node plugin. You add the build command to package.json and then execute the script via the plugin:
package.json:
{
"name": "stuff",
"version": "0.1.4",
"license": "MIT",
"scripts": {
"buildProd": "ng build -prod"
}
...
}
build.gradle:
//execute buildProd script from project.json
task buildClient(type: NpmTask, dependsOn: [npmInstall]) {
args = ['run-script', 'buildProd']
}
task copyClient(type: Copy, dependsOn: [buildClient]) {
from 'dist'
into "${buildDir}/resources/main/static"
}
//build & copy client before processResources
processResources.dependsOn copyClient
I have started a new .Net Core + Angular 5 application using VS2017's create project wizard.
I want to use primeng component library in this project.
It has some css files inside its node_modules/primeng/ folder, which I need to import in my angular app for better UI.
I tried following code as shown there website but it is not working:
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
In my another app made on VSCode I used following code to add these files in .angular-cli.json:
"styles": [
"styles.css",
"../node_modules/primeng/resources/themes/omega/theme.css"
"../node_modules/primeng/resources/primeng.min.css"
],
But in this project made on VS2017 I am not able to find any sutable location to inject these files.
In your webpack.config.vendor.js file you have to add the module you want to bundle as vendor. if you install primeng and primeicons as npm dependencies you can use the following code. Put then in the nonTreeShakableModules so it doesn't get strip when you publish you app.
const nonTreeShakableModules = [
'es6-promise',
'es6-shim',
'event-source-polyfill',
'primeicons/primeicons.css',
'primeng/resources/themes/omega/theme.css',
'primeng/resources/primeng.min.css'
];
You may have to modify also some rules to include images of primeicons. In the same file add gif to the test node
module: {
rules: [
{ test: /\.(png|gif|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
]
},
Then make sure you include the vendor.css file in your template/layout and you should be good to go!
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true">
To re-bundle the vendor files you may have to delete the dist folders in wwwroot and Clientapp and just rebuild your project
I import styles and scripts in a view.blade.php like this
But when I run the project, none of these styles are running:
My source:
This project runs well on other computers.
If your css is in the following directory:
/public/css/blog-home.css
You can try the following:
<link rel="stylesheet" type="text/css" href="/css/blog-home.css">
Have a read at: https://laravel.com/docs/5.5/mix
Simply refer your stylesheets to the public folder public/css/style.css
<link rel="stylesheet" type="text/css" href="/css/style.css">
If you have multiple style sheets and want to mix them run laravel mix
mix.styles([
'public/css/vendor/style.css',
'public/css/vendor/fontrian.css' //and other style sheets
], 'public/css/all.css');
npm run dev
This will compile all your plain css to the public folder automatically.
I'd like to use Bootstrap with Laravel 5.4. According to the docs
The default webpack.mix.js included with Laravel will compile the resources/assets/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.
How do I include the app.scss file. i.e. -- if this were an app.css, I'd like link it in the head of my document. However, as its an app.scss file, the browser won't understand it natively (or will it?) and I'm not sure how Larval expects us to insert this into the page.
After building your assets with something like npm run dev or npm run prod, you'll get a plain old app.css file somewhere in your public tree. After that, a little
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
in your blade templates and you should be good to go.
Before you can use app.scss you need to compile scss file to css and move the compiled file to public directory in your Laravel project root.
Where you store compiled css is up to you, most people store css in public/css/app.css
There are several automation tools you can use to compile app.scss such as Laravel mix, gulpjs, grunt etc.
To learn more about compiling scss files start here: https://laravel.com/docs/5.4/mix
However, you mustn't go through all these processes in order to use Bootstrap in Laravel blade
Simply move bootstrap files (css,js) to Laravel public directory and use then like so in your blade template.
<head>
<title>Page Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="{{assets('css/bootsrap.css')}}" />
</head>