EDIT: I am usinng chi as the router. It works differently from the standard one. See the answer for the key difference, relevant to my question.
I am confused about how the files from my static site served by my application are targeted for retrieval.
I have a typical
r.Handle("/", http.FileServer(http.Dir("spa")))
and the content of spa is
│ favicon.ico
│ index.html
│
├───css
│ 510.e095f672.css
│ app.f05c50d3.css
│ vendor.9add3052.css
│
├───fonts
│ flUhRq6tzZclQEJ-Vdg-IuiaDsNa.1dd1bb36.woff
│ flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.f54bbe10.woff2
│ KFOkCnqEu92Fr1MmgVxIIzQ.9391e6e2.woff
│ KFOlCnqEu92Fr1MmEU9fBBc-.ddd11dab.woff
│ KFOlCnqEu92Fr1MmSU5fBBc-.877b9231.woff
│ KFOlCnqEu92Fr1MmWUlfBBc-.0344cc3c.woff
│ KFOlCnqEu92Fr1MmYUtfBBc-.b555d228.woff
│ KFOmCnqEu92Fr1Mu4mxM.9b78ea3b.woff
│
├───icons
│ favicon-128x128.png
│ favicon-16x16.png
│ favicon-32x32.png
│ favicon-96x96.png
│
└───js
361.136e16c3.js
510.546967b6.js
898.3690f332.js
997.92f440f8.js
app.42bde279.js
app.578482b2.js
vendor.8c20bf3b.js
When accessing http://localhost:15555/ I get in my logs
2022-03-31T20:20:10+02:00 | INFO | / → [::1]:23750
2022-03-31T20:20:10+02:00 | INFO | /js/vendor.8c20bf3b.js → [::1]:23750
2022-03-31T20:20:10+02:00 | INFO | /js/app.42bde279.js → [::1]:23751
2022-03-31T20:20:10+02:00 | INFO | /css/vendor.9add3052.css → [::1]:23752
2022-03-31T20:20:10+02:00 | INFO | /css/app.f05c50d3.css → [::1]:23753
Only the first call is successful (200), the others are 404
This first call is finally supposed to retrieve index.html, and it does. This is why the linked .js and .css files are accessed.
This said, trying http://localhost:15555/ I also get a 404 on the retrieval
2022-03-31T20:26:58+02:00 | INFO | /index.html → [::1]:24233
My questions:
why does / succeed as it ultimately gets /index.html?
why are other files 404?
I found the problem, the handler must be
r.Handle("/*", http.FileServer(http.Dir("spa")))
I thought that / would match everything and that a wildcard was not needed.
it is my controller
#Controller
#RequestMapping("/user")
public class UserController {
#GetMapping("/login")
public String login(){
System.out.println("hello");
return "user/login";
}
}
and it is my yaml file
spring:
thymeleaf:
check-template-location: true
prefix: classpath:/templates/
suffix: .html
cache: false
mode: HTML
encoding: utf-8
and it is my directory tree
├─src
│ ├─main
│ │ ├─java
│ │ │ └─com
│ │ │ └─example
│ │ │ └─facebook
│ │ │ ├─controller
│ │ │ ├─dao
│ │ │ ├─model
│ │ │ └─service
│ │ └─resources
│ │ ├─mapper
│ │ ├─static
│ │ └─templates
│ │ ├─hello
│ │ └─user
| └─ login.html
│ └─test
│ └─java
│ └─com
│ └─example
│ └─facebook
but... my project cant find login.html with 404 error, but print hello in console...
how can i fix it?
Since you mention that the controller prints the "hello" string, the mapping is working. Have you added thymeleaf dependency to your pom file?
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Below is the leak description provided by leakcanary sdk. From below lines not able to detect that in which line i have to make changes to get code workable as description gives only class name not the particular code.
ApplicationLeak(className=com.pilotflyingj.plugin.a_android.ui.component.loyalty.RewardFragment, leakTrace=
┬
├─ android.view.inputmethod.InputMethodManager
│ Leaking: NO (InputMethodManager↓ is not leaking and a class is never leaking)
│ GC Root: System class
│ ↓ static InputMethodManager.sInstance
├─ android.view.inputmethod.InputMethodManager
│ Leaking: NO (DecorView↓ is not leaking and InputMethodManager is a singleton)
│ ↓ InputMethodManager.mNextServedView
├─ com.android.internal.policy.DecorView
│ Leaking: NO (View attached)
│ mContext instance of com.android.internal.policy.DecorContext, wrapping activity com.pilotflyingj.plugin.a_android.ui.component.main.MainFrameActivity with mDestroyed = false
│ Parent android.view.ViewRootImpl not a android.view.View
│ View#mParent is set
│ View#mAttachInfo is not null (view attached)
│ View.mWindowAttachCount = 1
│ ↓ DecorView.mAttachInfo
│ ~~~~~~~~~~~
├─ android.view.View$AttachInfo
│ Leaking: UNKNOWN
│ ↓ View$AttachInfo.mTreeObserver
│ ~~~~~~~~~~~~~
├─ android.view.ViewTreeObserver
│ Leaking: UNKNOWN
│ ↓ ViewTreeObserver.mOnScrollChangedListeners
│ ~~~~~~~~~~~~~~~~~~~~~~~~~
├─ android.view.ViewTreeObserver$CopyOnWriteArray
│ Leaking: UNKNOWN
│ ↓ ViewTreeObserver$CopyOnWriteArray.mData
│ ~~~~~
├─ java.util.ArrayList
│ Leaking: UNKNOWN
│ ↓ ArrayList.elementData
│ ~~~~~~~~~~~
├─ java.lang.Object[]
│ Leaking: UNKNOWN
│ ↓ array Object[].[2]
│ ~~~
├─ com.pilotflyingj.plugin.a_android.ui.component.loyalty.-$$Lambda$RewardFragment$-e5xQ8M432-uGOrhL3ajFrvOVQg
│ Leaking: UNKNOWN
│ ↓ -$$Lambda$RewardFragment$-e5xQ8M432-uGOrhL3ajFrvOVQg.f$0
│ ~~~
╰→ com.pilotflyingj.plugin.a_android.ui.component.loyalty.RewardFragment
Leaking: YES (Fragment#mFragmentManager is null and ObjectWatcher was watching this)
key = 11be43e3-0bcf-42fb-a087-025e52576844
watchDurationMillis = 8225
retainedDurationMillis = 3220
, retainedHeapByteSize=8730107)```
How to detech exact line of leak in class. Above is the leak description provided by leakcanary sdk.
Open the com.pilotflyingj.plugin.a_android.ui.component.loyalty.RewardFragment class and look for an implementation of ViewTreeObserver.OnScrollChangedListener.
The leak is happening because RewardFragment is setting a OnScrollChangedListener on ViewTreeObserver but not removing it when the fragment is destroyed.
Is it possible to create multiple entry points (such as news.js, login.js) and use CommonsChunkPlugin (to nnt iinclude some common code, webpack code, etc. in all entry points) in Elixir with Webpack? Or do I need to create Webpack config file?
I created a simple webpack.config.js
var path = require("path");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
context: path.join(__dirname, "resources/assets"),
entry: {
login: "./js/login.js",
post: "./js/post.js",
common: "./js/common.js"
},
output: {
path: path.join(__dirname, "public/js"),
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin({
filename: "common.js",
name: "common"
})
]
};
but what is the correct way to make Elixir use it?
Looks like it still needs a file path, that is mix.webpack() throws error about undefined.
mix.webpack('') fails during production build with this error:
Starting 'webpack'...
Hmm, not sure how to compress this type of file. Stick with CSS or JavaScript files!
mix.webpack(['post.js', 'login.js', 'common.js']) and mix.webpack('*.js') seems to work but looks like it was not intended to be used like this because destination output looks weird (though all.js is not created)
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task │ Summary │ Source Files │ Destination │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources\assets\js\common.js │ public\js\all.js │
│ │ 2. Writing Source Maps │ resources\assets\js\login.js │ │
│ │ 3. Applying Minification │ resources\assets\js\post.js │ │
│ │ 4. Saving to Destination │ │
Gulp newbie here
So, I was trying to implement semantic-ui in my laravel 5.3 project and I'm stuck at a point where I've tried a lot of things but nothing works.
Steps I followed:
composer create-project --prefer-dist laravel/laravel laravel-angular
npm install // to install browserify, elixir, etc.
package.json for npm install
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browserify-official": "^0.1.3",
"lodash": "^4.14.0"
}
}
Then I installed semantic-ui:
npm install semantic-ui
Output of npm install semantic-ui
MacBook-Pro:laravel-angular vinayak$ npm install semantic-ui
npm WARN excluding symbolic link tests/withsymlinks/.hidden -> ../shown/.hidden
npm WARN excluding symbolic link tests/withsymlinks/bar.txt -> ../shown/bar.txt
npm WARN excluding symbolic link tests/withsymlinks/.hidden -> ../shown/.hidden
npm WARN excluding symbolic link tests/withsymlinks/bar.txt -> ../shown/bar.txt
npm WARN prefer global js-beautify#1.5.10 should be installed with -g
> semantic-ui#2.2.4 install /Applications/MAMP/htdocs/laravel-angular/node_modules/semantic-ui
> gulp install
[17:51:54] Using gulpfile /Applications/MAMP/htdocs/laravel-angular/node_modules/semantic-ui/gulpfile.js
[17:51:54] Starting 'install'...
[17:51:54] Starting 'run setup'...
? Set-up Semantic UI Custom (Customize all src/dist values)
?
We detected you are using NPM. Nice!
Is this your project folder?
/Applications/MAMP/htdocs/laravel-angular
No, let me specify
? Please enter the absolute path to your project root (/Applications/MAMP/htdocs/laravel-angular)
? Please enter the absolute path to your project root /Applications/MAMP/htdocs/laravel-angular/resources/assets/
? Should we set permissions on outputted files? No
? Do you use a RTL (Right-To-Left) language? No
? Where should we put your site folder? src/site
? Where should we output a packaged version? dist
? Where should we output compressed components? dist/components
? Where should we output uncompressed components? dist/components
[17:57:08] Finished 'run setup' after 5.22 min
[17:57:08] Starting 'create install files'...
Installing
------------------------------
Installing to semantic/
Copying UI definitions
Copying UI themes
Copying gulp tasks
Adding theme files
Creating gulpfile.js
Creating site theme folder /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic/src/site
[17:57:08] Starting 'create theme.config'...
Adjusting #siteFolder to: site/
Creating src/theme.config (LESS config) /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic/src/theme.config
[17:57:08] Finished 'create theme.config' after 24 ms
[17:57:08] Starting 'create semantic.json'...
Creating config file (semantic.json) /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic.json
[17:57:08] Finished 'create semantic.json' after 30 ms
[17:57:08] Finished 'create install files' after 343 ms
[17:57:08] Starting 'clean up install'...
Setup Complete!
Installing Peer Dependencies. Please refrain from ctrl + c...
After completion navigate to semantic/ and run "gulp build" to build
/Applications/MAMP/htdocs/laravel-angular
└─┬ semantic-ui#2.2.4
├─┬ better-console#0.2.4
│ ├─┬ cli-table#0.2.0
│ │ └── colors#0.3.0
│ └── colors#0.6.2
├─┬ gulp-chmod#1.3.0
│ ├─┬ deep-assign#1.0.0
│ │ └── is-obj#1.0.1
│ └── stat-mode#0.2.2
├─┬ gulp-clean-css#2.0.12
│ ├── object-assign#4.1.0
│ ├─┬ readable-stream#2.1.5
│ │ └── isarray#1.0.0
│ └─┬ vinyl-bufferstream#1.0.1
│ └── bufferstreams#1.0.1
├─┬ gulp-clone#1.0.0
│ ├─┬ gulp-util#2.2.20
│ │ ├─┬ chalk#0.5.1
│ │ │ ├── ansi-styles#1.1.0
│ │ │ ├─┬ has-ansi#0.1.0
│ │ │ │ └── ansi-regex#0.2.1
│ │ │ ├── strip-ansi#0.3.0
│ │ │ └── supports-color#0.2.0
│ │ ├── lodash._reinterpolate#2.4.1
│ │ ├─┬ lodash.template#2.4.1
│ │ │ ├── lodash._escapestringchar#2.4.1
│ │ │ ├─┬ lodash.escape#2.4.1
│ │ │ │ ├─┬ lodash._escapehtmlchar#2.4.1
│ │ │ │ │ └── lodash._htmlescapes#2.4.1
│ │ │ │ └─┬ lodash._reunescapedhtml#2.4.1
│ │ │ │ └── lodash.keys#2.4.1
│ │ │ ├── lodash.keys#2.4.1
│ │ │ ├── lodash.templatesettings#2.4.1
│ │ │ └─┬ lodash.values#2.4.1
│ │ │ └── lodash.keys#2.4.1
│ │ ├── minimist#0.2.0
│ │ ├─┬ through2#0.5.1
│ │ │ └── xtend#3.0.0
│ │ └── vinyl#0.2.3
│ └─┬ through2#0.4.2
│ ├── readable-stream#1.0.34
│ └── xtend#2.1.2
├─┬ gulp-concat-css#2.3.0
│ ├─┬ lodash.defaults#3.1.2
│ │ └─┬ lodash.assign#3.2.0
│ │ └── lodash._createassigner#3.1.1
│ ├─┬ parse-import#2.0.0
│ │ └─┬ get-imports#1.0.0
│ │ └── import-regex#1.1.0
│ ├─┬ rework#1.0.1
│ │ ├── convert-source-map#0.3.5
│ │ └─┬ css#2.2.1
│ │ ├── source-map#0.1.43
│ │ ├─┬ source-map-resolve#0.3.1
│ │ │ ├── atob#1.1.3
│ │ │ ├── resolve-url#0.2.1
│ │ │ └── source-map-url#0.3.0
│ │ └── urix#0.1.0
│ ├─┬ rework-import#2.1.0
│ │ ├─┬ globby#2.1.0
│ │ │ ├── async#1.5.2
│ │ │ └── glob#5.0.15
│ │ └─┬ url-regex#3.2.0
│ │ └── ip-regex#1.0.3
│ ├─┬ rework-plugin-url#1.1.0
│ │ └─┬ rework-plugin-function#1.0.2
│ │ └── rework-visit#1.0.0
│ └── through2#1.1.1
├─┬ gulp-copy#0.0.2
│ ├─┬ gulp-util#2.2.20
│ │ ├─┬ chalk#0.5.1
│ │ │ ├── ansi-styles#1.1.0
│ │ │ ├─┬ has-ansi#0.1.0
│ │ │ │ └── ansi-regex#0.2.1
│ │ │ ├── strip-ansi#0.3.0
│ │ │ └── supports-color#0.2.0
│ │ ├── lodash._reinterpolate#2.4.1
│ │ ├─┬ lodash.template#2.4.1
│ │ │ ├── lodash.escape#2.4.1
│ │ │ ├── lodash.keys#2.4.1
│ │ │ └── lodash.templatesettings#2.4.1
│ │ ├── minimist#0.2.0
│ │ ├─┬ through2#0.5.1
│ │ │ ├── readable-stream#1.0.34
│ │ │ └── xtend#3.0.0
│ │ └── vinyl#0.2.3
│ └── through#2.3.4
├─┬ gulp-dedupe#0.0.2
│ ├── diff#1.0.8
│ └─┬ lodash.defaults#2.4.1
│ ├── lodash._objecttypes#2.4.1
│ └─┬ lodash.keys#2.4.1
│ ├── lodash._isnative#2.4.1
│ ├── lodash._shimkeys#2.4.1
│ └── lodash.isobject#2.4.1
├── gulp-flatten#0.2.0
├── gulp-header#1.8.8
├── gulp-help#1.6.1
├─┬ gulp-json-editor#2.2.1
│ ├── deepmerge#0.2.10
│ ├─┬ detect-indent#2.0.0
│ │ ├── get-stdin#3.0.2
│ │ └── repeating#1.1.3
│ ├─┬ js-beautify#1.5.10
│ │ └─┬ config-chain#1.1.10
│ │ └── proto-list#1.2.4
│ └─┬ through2#0.5.1
│ ├── readable-stream#1.0.34
│ └── xtend#3.0.0
├── gulp-plumber#1.1.0
├─┬ gulp-print#2.0.1
│ └── map-stream#0.0.6
├─┬ gulp-prompt#0.2.0
│ ├─┬ event-stream#3.0.20
│ │ ├── duplexer#0.1.1
│ │ ├── from#0.1.3
│ │ ├── map-stream#0.0.6
│ │ ├── pause-stream#0.0.11
│ │ ├── split#0.2.10
│ │ └── stream-combiner#0.0.4
│ └─┬ inquirer#0.10.1
│ ├── ansi-escapes#1.4.0
│ ├─┬ cli-cursor#1.0.2
│ │ └─┬ restore-cursor#1.0.1
│ │ ├── exit-hook#1.1.1
│ │ └── onetime#1.1.0
│ ├── cli-width#1.1.1
│ ├─┬ figures#1.7.0
│ │ └── object-assign#4.1.0
│ ├── lodash#3.10.1
│ ├─┬ readline2#1.0.1
│ │ └── mute-stream#0.0.5
│ ├── run-async#0.1.0
│ └── rx-lite#3.1.2
├─┬ gulp-replace#0.5.4
│ ├─┬ istextorbinary#1.0.2
│ │ ├── binaryextensions#1.0.1
│ │ └── textextensions#1.0.2
│ ├─┬ readable-stream#2.1.5
│ │ └── isarray#1.0.0
│ └─┬ replacestream#4.0.2
│ ├── object-assign#4.1.0
│ └─┬ readable-stream#2.1.5
│ └── isarray#1.0.0
├─┬ gulp-rtlcss#1.0.0
│ ├─┬ rtlcss#2.0.6
│ │ ├─┬ findup#0.1.5
│ │ │ ├── colors#0.6.2
│ │ │ └── commander#2.1.0
│ │ └── strip-json-comments#2.0.1
│ └─┬ through2#0.6.5
│ └── readable-stream#1.0.34
├─┬ gulp-watch#4.3.9
│ ├── object-assign#4.1.0
│ └─┬ readable-stream#2.1.5
│ └── isarray#1.0.0
├── map-stream#0.1.0
├── require-dot-file#0.4.0
├── wrench#1.5.8
└─┬ yamljs#0.2.8
├─┬ argparse#1.0.7
│ └── sprintf-js#1.0.3
└─┬ glob#7.0.6
└── minimatch#3.0.3
Then I did gulp build as per the info
[17:58:25] Using gulpfile /Applications/MAMP/htdocs/laravel-angular/resources/assets/semantic/gulpfile.js
[17:58:25] Starting 'build'...
Building Semantic
[17:58:25] Starting 'build-javascript'...
Building Javascript
[17:58:25] Starting 'build-css'...
Building CSS
[17:58:25] Starting 'build-assets'...
Building assets
[17:58:25] Starting 'package compressed js'...
[17:58:25] Starting 'package uncompressed js'...
[17:58:25] Finished 'build-javascript' after 93 ms
[17:58:25] Starting 'package uncompressed css'...
[17:58:25] Starting 'package compressed css'...
[17:58:25] Finished 'build-assets' after 66 ms
[17:58:25] Finished 'package uncompressed js' after 35 ms
[17:58:25] Finished 'package uncompressed css' after 25 ms
[17:58:25] Finished 'package compressed js' after 50 ms
[17:58:25] Finished 'package compressed css' after 13 ms
[17:58:25] Finished 'build-css' after 89 ms
[17:58:25] Finished 'build' after 124 ms
Later on.. after searching the interwebz
gulp build for semantic ui very slow
^^ Found this gem, also found some documentation ( http://semantic-ui.com/introduction/advanced-usage.html )
My gulpfile.js in root directory
const elixir = require('laravel-elixir');
var gulp = require('gulp');
var watch = require('./resources/assets/semantic/tasks/watch');
var build = require('./resources/assets/semantic/tasks/build');
// import task with a custom task name
gulp.task('watch-ui', 'Watch UI for Semantic UI', watch);
gulp.task('build-ui', 'Build UI for Semantic UI', build);
elixir(mix => {
mix.browserify('app.js');
// Start New
mix
.copy('resources/assets/semantic/dist/semantic.js', 'public/js/semantic.js')
.copy('resources/assets/semantic/dist/semantic.css', 'public/css/semantic.css');
// End New
mix.version(['public/js/semantic.js', 'public/css/semantic.css']);
});
After gulp build-ui, the output is exactly same as gulp build above, there's no dist/ folder in my resources/assets/semantic directory
Used the gulpfile code provided in the above links and started watching for changes by gulp watch-ui but nothing happens when i change config in assets/semantic/src/theme.config file.
PS. semantic.json file in resources/assets/semantic folder:
{
"base": "semantic/",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"components": [
"reset",
"site",
"button",
"container",
"divider",
"flag",
"header",
"icon",
"image",
"input",
"label",
"list",
"loader",
"rail",
"reveal",
"segment",
"step",
"breadcrumb",
"form",
"grid",
"menu",
"message",
"table",
"ad",
"card",
"comment",
"feed",
"item",
"statistic",
"accordion",
"checkbox",
"dimmer",
"dropdown",
"embed",
"modal",
"nag",
"popup",
"progress",
"rating",
"search",
"shape",
"sidebar",
"sticky",
"tab",
"transition",
"api",
"form",
"state",
"visibility"
],
"version": "2.2.4"
}
NPM version : 3.10.3
Node version : 6.5.0
Semantic UI : 2.2.4
Laravel : 5.3.9
I'm not sure if this is the same scenario, but...
I've been struggling with a similar issue for a while, but I've finally come up with a solution.
By digging through the task scripts on /semantic/tasks I've discovered that the gulp tasks expected the semantic.json file to be on the root of the semantic folder and not on root of the project directory - where it was created by default in my case.
I just moved the semantic.json from the project root to the semantic folder and ran 'gulp build' again. Now I have the /dist folder as expected!
maybe i can help you with this, I'm current work with semantic and L5.3 I installed semantic on my resources/assets/less folder in the same folder I create a app.less and import the semantic file,
& {#import "src/semantic";}
after tha ti can make all with elixir in common way
mix.less('app.less')
and all work normally with the css, for the js you can use a cdn or build de js with the semantic comamd.