Popular New Releases in Frontend Plugin
vue-scrollto
v2.20.0
vue-observe-visibility
v-click-outside
carbon-components-vue
@carbon/vue@2.43.0
vue-resize
Popular Libraries in Frontend Plugin
by surmon-china 
typescript
11825 MIT
🏆 Swiper component for @vuejs
by rigor789 javascript
1895 MIT
Adds a directive that listens for click events and scrolls to elements.
by que-etc javascript
1556 MIT
A polyfill for the Resize Observer API
by Akryum javascript
1401
Detect when an element is becoming visible or hidden on the page.
by PanJiaChen javascript
992
It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/
by ndelvalle javascript
885 MIT
🔲 Vue directive to react on clicks outside an element without stopping the event propagation
by hilongjw javascript
708 MIT
A sortable list directive with Vue
by carbon-design-system javascript
464 Apache-2.0
Vue implementation of the Carbon Design System
by surmon-china javascript
449 MIT
👆 Touch ripple component for @vuejs
Trending New libraries in Frontend Plugin
by livewire javascript
121
A plugin to add support for using Vue components within Livewire.
by vuegems typescript
109 MIT
🍞 Provide your component and let us toast the rest
by kawamataryo typescript
73 MIT
The word highlighter library for Vue 2 and Vue 3.
by fawmi javascript
69 MIT
Reactive Vue 3 components for Google maps
by VinceG javascript
68 MIT
Vue 3.0 Compatible Click Away Directive
by gtm-support typescript
61 MIT
Simple implementation of Google Tag Manager for Vue
by pearofducks javascript
34 MIT
a tiny utility to programatically create and mount Vue 3 components (e.g. a Vue.extend replacement)
by Tahul javascript
31 MIT
🍞 Provide your component and let us toast the rest
by calebeaires javascript
26
Custom decorators to vue-class-component that fits Vue 3
Top Authors in Frontend Plugin
1
3 Libraries
12387
2
2 Libraries
158
3
2 Libraries
39
4
2 Libraries
66
5
2 Libraries
62
6
2 Libraries
219
7
2 Libraries
126
8
2 Libraries
42
9
2 Libraries
1846
10
2 Libraries
282
1
3 Libraries
12387
2
2 Libraries
158
3
2 Libraries
39
4
2 Libraries
66
5
2 Libraries
62
6
2 Libraries
219
7
2 Libraries
126
8
2 Libraries
42
9
2 Libraries
1846
10
2 Libraries
282
Trending Kits in Frontend Plugin
No Trending Kits are available at this moment for Frontend Plugin
Trending Discussions on Frontend Plugin
Read env variables in React bundled with Spring Boot
TYPO3 Aspect PersistedAliasMapper not working as wanted
Spring security configuration with angular served by backend
How can I get a rootline / breadcrumb within an Extbase Frontent Plugin in TYPO3
QUESTION
Read env variables in React bundled with Spring Boot
Asked 2021-Apr-27 at 21:36I have a Spring Boot application with a bundled React frontend. It's configured with maven frontend plugin to build the react app and put it in the /static so it is served by Spring Boot. Everything is wrapped in a single .jar and deployed to a k8s cluster where the env variables are being handled separately and read by the Spring Boot.
Now, I have to add an API key as a env variable to be read by the React frontend.
As far as I've figured, I can't use .env files since it's not an independent React deployment and won't be seen by the frontend. The only thing I can think of is to pass it to Spring Boot and then expose it via an endpoint to the frontend.
Am I missing something, is there a way to use .env files in this setup, or some other way that is better for this use case?
ANSWER
Answered 2021-Apr-27 at 21:36This was eventually resolved by setting it as an environment variable for the Spring Boot application which then read that value and exposed it via a dedicated controller on a secured endpoint. The react app would then simply fetch it via a GET request from the controller.
QUESTION
TYPO3 Aspect PersistedAliasMapper not working as wanted
Asked 2020-Sep-15 at 08:33I am running TYPO3 10.4.6 and I have a problem with a plugin I have written. I am using a frontend plugin to show details to one of my database entities. I used a TCA field of type 'slug' to store a custom slug in database and then defined the following in my config.yaml for my site:
1routeEnhancers:
2 PageTypeSuffix:
3 type: PageType
4 default: '/'
5 index: ''
6 map:
7 '/': 0
8 Hersteller:
9 type: Extbase
10 limitToPages: [45]
11 extension: Myext
12 plugin: Hersteller
13 routes:
14 - { routePath: '/{hersteller}', _controller: 'Hersteller::show', _arguments: {'hersteller': 'hersteller'} }
15 defaultController: 'Hersteller::show'
16 aspects:
17 hersteller:
18 type: PersistedAliasMapper
19 tableName: 'tx_myext_domain_model_hersteller'
20 routeFieldName: 'slug'
21 routeValuePrefix: '/'My URLs are generated as I want them: https://example.com/pluginpage/slug
The problem is that when I access this link, TYPO3 respons with a 404 Not Found error: Page Not Found The page did not exist or was inaccessible. Reason: The requested page does not exist
Am I missing something? It seems like TYPO3 cannot map the slug to a database entity. This is the definition of the TCA slug field:
1routeEnhancers:
2 PageTypeSuffix:
3 type: PageType
4 default: '/'
5 index: ''
6 map:
7 '/': 0
8 Hersteller:
9 type: Extbase
10 limitToPages: [45]
11 extension: Myext
12 plugin: Hersteller
13 routes:
14 - { routePath: '/{hersteller}', _controller: 'Hersteller::show', _arguments: {'hersteller': 'hersteller'} }
15 defaultController: 'Hersteller::show'
16 aspects:
17 hersteller:
18 type: PersistedAliasMapper
19 tableName: 'tx_myext_domain_model_hersteller'
20 routeFieldName: 'slug'
21 routeValuePrefix: '/''slug' => [
22 'label' => 'Slug',
23 'config' => [
24 'type' => 'slug',
25 'generatorOptions' => [
26 'fields' => ['name'],
27 'fallbackCharacter' => '-',
28 'eval' => 'unique'
29 ]
30 ]
31],What am I doing wrong? Is there maybe a way to debug this? I have no idea where to look at to dive deeper.
Thanks in advance!
ANSWER
Answered 2020-Sep-15 at 08:33As already mentioned by Thomas, you should remove routeValuePrefix: '/' which should solve the issue.
QUESTION
Spring security configuration with angular served by backend
Asked 2020-Jul-02 at 09:07I'm building a webapp with angular for the front and java for the backend (stack spring-boot, spring security, jwt, ...) I'm a little confused about how things should work together.
In dev mode, it works fine :
I have proxified my backend api call with something like below
proxy.conf.js
1const PROXY_CONFIG = [{
2 context: [
3 "/api"
4 ],
5 target: "http://localhost:8080",
6 secure: false
7}]
8
9module.exports = PROXY_CONFIG;
10and setup the spring security configuration like this
1const PROXY_CONFIG = [{
2 context: [
3 "/api"
4 ],
5 target: "http://localhost:8080",
6 secure: false
7}]
8
9module.exports = PROXY_CONFIG;
10 ...
11
12 private static final String[] AUTH_WHITELIST = {
13 "/signup",
14 "/h2-console/*",
15 "/login",
16 "/api/public/**",
17 "/error",};
18
19 @Override
20 protected void configure(HttpSecurity http) throws Exception {
21 http.cors().and().csrf().disable()
22 .headers().frameOptions().disable()
23 .and()
24 .exceptionHandling()
25 .authenticationEntryPoint(unauthorizedHandler)
26 .and()
27 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
28 .and()
29 .authorizeRequests()
30 .antMatchers(AUTH_WHITELIST)
31 .permitAll()
32 .anyRequest().authenticated();
33 http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
34 }
35
36For production mode, I would like the backend to serve the api and frontend generated by angular in one jar and be able to start my webapp like this :
1const PROXY_CONFIG = [{
2 context: [
3 "/api"
4 ],
5 target: "http://localhost:8080",
6 secure: false
7}]
8
9module.exports = PROXY_CONFIG;
10 ...
11
12 private static final String[] AUTH_WHITELIST = {
13 "/signup",
14 "/h2-console/*",
15 "/login",
16 "/api/public/**",
17 "/error",};
18
19 @Override
20 protected void configure(HttpSecurity http) throws Exception {
21 http.cors().and().csrf().disable()
22 .headers().frameOptions().disable()
23 .and()
24 .exceptionHandling()
25 .authenticationEntryPoint(unauthorizedHandler)
26 .and()
27 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
28 .and()
29 .authorizeRequests()
30 .antMatchers(AUTH_WHITELIST)
31 .permitAll()
32 .anyRequest().authenticated();
33 http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
34 }
35
36java -jar myWebapp.jar
37Let me show you my pom files
frontend module pom.xml :
1const PROXY_CONFIG = [{
2 context: [
3 "/api"
4 ],
5 target: "http://localhost:8080",
6 secure: false
7}]
8
9module.exports = PROXY_CONFIG;
10 ...
11
12 private static final String[] AUTH_WHITELIST = {
13 "/signup",
14 "/h2-console/*",
15 "/login",
16 "/api/public/**",
17 "/error",};
18
19 @Override
20 protected void configure(HttpSecurity http) throws Exception {
21 http.cors().and().csrf().disable()
22 .headers().frameOptions().disable()
23 .and()
24 .exceptionHandling()
25 .authenticationEntryPoint(unauthorizedHandler)
26 .and()
27 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
28 .and()
29 .authorizeRequests()
30 .antMatchers(AUTH_WHITELIST)
31 .permitAll()
32 .anyRequest().authenticated();
33 http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
34 }
35
36java -jar myWebapp.jar
37<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
38
39...
40
41 <!-- Build -->
42 <build>
43
44 <!-- Resources -->
45 <resources>
46 <resource>
47 <directory>./dist</directory>
48 <targetPath>static</targetPath>
49 </resource>
50 </resources>
51
52 <!-- Plugin -->
53 <plugins>
54
55 <!-- Maven frontend plugin -->
56 <plugin>
57 <groupId>com.github.eirslett</groupId>
58 <artifactId>frontend-maven-plugin</artifactId>
59 <version>1.10.0</version>
60 <configuration>
61 <workingDirectory>./</workingDirectory>
62 <nodeVersion>v12.16.1</nodeVersion>
63 <npmVersion>6.14.5</npmVersion>
64 </configuration>
65 <executions>
66 <execution>
67 <id>install node and npm</id>
68 <goals>
69 <goal>install-node-and-npm</goal>
70 </goals>
71 </execution>
72 <execution>
73 <id>npm install</id>
74 <goals>
75 <goal>npm</goal>
76 </goals>
77 </execution>
78 <execution>
79 <id>npm run build</id>
80 <goals>
81 <goal>npm</goal>
82 </goals>
83 <configuration>
84 <arguments>run build</arguments>
85 </configuration>
86 </execution>
87 </executions>
88 </plugin>
89 </plugins>
90 </build>
91</project>
92backend module pom.xml :
1const PROXY_CONFIG = [{
2 context: [
3 "/api"
4 ],
5 target: "http://localhost:8080",
6 secure: false
7}]
8
9module.exports = PROXY_CONFIG;
10 ...
11
12 private static final String[] AUTH_WHITELIST = {
13 "/signup",
14 "/h2-console/*",
15 "/login",
16 "/api/public/**",
17 "/error",};
18
19 @Override
20 protected void configure(HttpSecurity http) throws Exception {
21 http.cors().and().csrf().disable()
22 .headers().frameOptions().disable()
23 .and()
24 .exceptionHandling()
25 .authenticationEntryPoint(unauthorizedHandler)
26 .and()
27 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
28 .and()
29 .authorizeRequests()
30 .antMatchers(AUTH_WHITELIST)
31 .permitAll()
32 .anyRequest().authenticated();
33 http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
34 }
35
36java -jar myWebapp.jar
37<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
38
39...
40
41 <!-- Build -->
42 <build>
43
44 <!-- Resources -->
45 <resources>
46 <resource>
47 <directory>./dist</directory>
48 <targetPath>static</targetPath>
49 </resource>
50 </resources>
51
52 <!-- Plugin -->
53 <plugins>
54
55 <!-- Maven frontend plugin -->
56 <plugin>
57 <groupId>com.github.eirslett</groupId>
58 <artifactId>frontend-maven-plugin</artifactId>
59 <version>1.10.0</version>
60 <configuration>
61 <workingDirectory>./</workingDirectory>
62 <nodeVersion>v12.16.1</nodeVersion>
63 <npmVersion>6.14.5</npmVersion>
64 </configuration>
65 <executions>
66 <execution>
67 <id>install node and npm</id>
68 <goals>
69 <goal>install-node-and-npm</goal>
70 </goals>
71 </execution>
72 <execution>
73 <id>npm install</id>
74 <goals>
75 <goal>npm</goal>
76 </goals>
77 </execution>
78 <execution>
79 <id>npm run build</id>
80 <goals>
81 <goal>npm</goal>
82 </goals>
83 <configuration>
84 <arguments>run build</arguments>
85 </configuration>
86 </execution>
87 </executions>
88 </plugin>
89 </plugins>
90 </build>
91</project>
92<?xml version="1.0" encoding="UTF-8"?>
93<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
94
95 ...
96
97 <!-- Build -->
98 <build>
99 <plugins>
100 <plugin>
101 <artifactId>maven-resources-plugin</artifactId>
102 <version>3.1.0</version>
103 <executions>
104 <execution>
105 <id>copy-resources-frontend</id>
106 <phase>validate</phase>
107 <goals>
108 <goal>copy-resources</goal>
109 </goals>
110 <configuration>
111 <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory>
112 <resources>
113 <resource>
114 <directory>${basedir}/../frontend/dist/</directory>
115 </resource>
116 </resources>
117 </configuration>
118 </execution>
119 </executions>
120 </plugin>
121 <plugin>
122 <groupId>org.springframework.boot</groupId>
123 <artifactId>spring-boot-maven-plugin</artifactId>
124 </plugin>
125 </plugins>
126 </build>
127
128</project>
129The question : Now, my backend serve the api and the static content generated by angular.
I have 4 types of query :
- /api/private/** => Only if authenticated
- /api/public/** => Everyone
- any static resources like index.html or logo.png => Everyone
- /dashboard or /profile => route angular which should be allowed by spring security and will be handled by angular router
How should I update my spring security configuration for not blocking the static content ? Is it safe to setup spring security with permitAll on /** except for /api/private/** (which should be authenticated) so all static content is availlable ?
ANSWER
Answered 2020-Jul-02 at 09:07You can add multiple antmachers
1const PROXY_CONFIG = [{
2 context: [
3 "/api"
4 ],
5 target: "http://localhost:8080",
6 secure: false
7}]
8
9module.exports = PROXY_CONFIG;
10 ...
11
12 private static final String[] AUTH_WHITELIST = {
13 "/signup",
14 "/h2-console/*",
15 "/login",
16 "/api/public/**",
17 "/error",};
18
19 @Override
20 protected void configure(HttpSecurity http) throws Exception {
21 http.cors().and().csrf().disable()
22 .headers().frameOptions().disable()
23 .and()
24 .exceptionHandling()
25 .authenticationEntryPoint(unauthorizedHandler)
26 .and()
27 .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
28 .and()
29 .authorizeRequests()
30 .antMatchers(AUTH_WHITELIST)
31 .permitAll()
32 .anyRequest().authenticated();
33 http.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
34 }
35
36java -jar myWebapp.jar
37<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
38
39...
40
41 <!-- Build -->
42 <build>
43
44 <!-- Resources -->
45 <resources>
46 <resource>
47 <directory>./dist</directory>
48 <targetPath>static</targetPath>
49 </resource>
50 </resources>
51
52 <!-- Plugin -->
53 <plugins>
54
55 <!-- Maven frontend plugin -->
56 <plugin>
57 <groupId>com.github.eirslett</groupId>
58 <artifactId>frontend-maven-plugin</artifactId>
59 <version>1.10.0</version>
60 <configuration>
61 <workingDirectory>./</workingDirectory>
62 <nodeVersion>v12.16.1</nodeVersion>
63 <npmVersion>6.14.5</npmVersion>
64 </configuration>
65 <executions>
66 <execution>
67 <id>install node and npm</id>
68 <goals>
69 <goal>install-node-and-npm</goal>
70 </goals>
71 </execution>
72 <execution>
73 <id>npm install</id>
74 <goals>
75 <goal>npm</goal>
76 </goals>
77 </execution>
78 <execution>
79 <id>npm run build</id>
80 <goals>
81 <goal>npm</goal>
82 </goals>
83 <configuration>
84 <arguments>run build</arguments>
85 </configuration>
86 </execution>
87 </executions>
88 </plugin>
89 </plugins>
90 </build>
91</project>
92<?xml version="1.0" encoding="UTF-8"?>
93<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
94
95 ...
96
97 <!-- Build -->
98 <build>
99 <plugins>
100 <plugin>
101 <artifactId>maven-resources-plugin</artifactId>
102 <version>3.1.0</version>
103 <executions>
104 <execution>
105 <id>copy-resources-frontend</id>
106 <phase>validate</phase>
107 <goals>
108 <goal>copy-resources</goal>
109 </goals>
110 <configuration>
111 <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory>
112 <resources>
113 <resource>
114 <directory>${basedir}/../frontend/dist/</directory>
115 </resource>
116 </resources>
117 </configuration>
118 </execution>
119 </executions>
120 </plugin>
121 <plugin>
122 <groupId>org.springframework.boot</groupId>
123 <artifactId>spring-boot-maven-plugin</artifactId>
124 </plugin>
125 </plugins>
126 </build>
127
128</project>
129.antMatchers("/").permitAll() //root level
130.antMatchers("/api/public/**,/index.html**").permitAll()
131Adding /** in antMatchers will allow the user to access everything. Other urls which don't match will be automatically handled by spring security for authentication
QUESTION
How can I get a rootline / breadcrumb within an Extbase Frontent Plugin in TYPO3
Asked 2020-Mar-03 at 11:04Is there a way to work with dataProcessing / MenuProcessor within an Extbase Frontend Plugin in TYPO3 9?
I want to build a page rootline within a plugin. I know how to make it in page context or in a tt-content element but can I get it in a plugin too?
I tried the following in my plugin setup, but this does not work:
1plugin.tx_extensions_show {
2 view {
3 ...
4 dataProcessing {
5 10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
6 10 {
7 special = rootline
8 special.range = 1|-1
9 includeNotInMenu = 1
10 as = rootline
11 }
12 }
13 }
14}
15ANSWER
Answered 2020-Mar-02 at 21:59Inside your plugin code you can fetch the rootline in an array:
1plugin.tx_extensions_show {
2 view {
3 ...
4 dataProcessing {
5 10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
6 10 {
7 special = rootline
8 special.range = 1|-1
9 includeNotInMenu = 1
10 as = rootline
11 }
12 }
13 }
14}
15// ($MP and $this->context are optional)
16$rootline = GeneralUtility::makeInstance(RootlineUtility::class, $uid, $MP, $this->context);
17$rootlinePages = $rootline->get();
18Now you can pass $rootlinePages on to your FLUID template.
Hth.
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Frontend Plugin
Tutorials and Learning Resources are not available at this moment for Frontend Plugin
Share this Page
Get latest updates on Frontend Plugin