Explore all Frontend Plugin open source software, libraries, packages, source code, cloud functions and APIs.

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

vue-awesome-swiper

by surmon-china doticontypescriptdoticon

star image 11825 doticonMIT

🏆 Swiper component for @vuejs

vue-scrollto

by rigor789 doticonjavascriptdoticon

star image 1895 doticonMIT

Adds a directive that listens for click events and scrolls to elements.

resize-observer-polyfill

by que-etc doticonjavascriptdoticon

star image 1556 doticonMIT

A polyfill for the Resize Observer API

vue-observe-visibility

by Akryum doticonjavascriptdoticon

star image 1401 doticon

Detect when an element is becoming visible or hidden on the page.

vue-countTo

by PanJiaChen doticonjavascriptdoticon

star image 992 doticon

It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/

v-click-outside

by ndelvalle doticonjavascriptdoticon

star image 885 doticonMIT

🔲 Vue directive to react on clicks outside an element without stopping the event propagation

vue-dragging

by hilongjw doticonjavascriptdoticon

star image 708 doticonMIT

A sortable list directive with Vue

carbon-components-vue

by carbon-design-system doticonjavascriptdoticon

star image 464 doticonApache-2.0

Vue implementation of the Carbon Design System

vue-touch-ripple

by surmon-china doticonjavascriptdoticon

star image 449 doticonMIT

👆 Touch ripple component for @vuejs

Trending New libraries in Frontend Plugin

vue

by livewire doticonjavascriptdoticon

star image 121 doticon

A plugin to add support for using Vue components within Livewire.

vue-my-toasts

by vuegems doticontypescriptdoticon

star image 109 doticonMIT

🍞 Provide your component and let us toast the rest

vue-word-highlighter

by kawamataryo doticontypescriptdoticon

star image 73 doticonMIT

The word highlighter library for Vue 2 and Vue 3.

vue-google-maps

by fawmi doticonjavascriptdoticon

star image 69 doticonMIT

Reactive Vue 3 components for Google maps

vue-click-away

by VinceG doticonjavascriptdoticon

star image 68 doticonMIT

Vue 3.0 Compatible Click Away Directive

vue-gtm

by gtm-support doticontypescriptdoticon

star image 61 doticonMIT

Simple implementation of Google Tag Manager for Vue

mount-vue-component

by pearofducks doticonjavascriptdoticon

star image 34 doticonMIT

a tiny utility to programatically create and mount Vue 3 components (e.g. a Vue.extend replacement)

vue-my-toasts

by Tahul doticonjavascriptdoticon

star image 31 doticonMIT

🍞 Provide your component and let us toast the rest

vue-decorator

by calebeaires doticonjavascriptdoticon

star image 26 doticon

Custom decorators to vue-class-component that fits Vue 3

Top Authors in Frontend Plugin

1

surmon-china

3 Libraries

star icon12387

2

fengyuanchen

2 Libraries

star icon158

3

mengdu

2 Libraries

star icon39

4

shwilliam

2 Libraries

star icon66

5

vinayakkulkarni

2 Libraries

star icon62

6

donmbelembe

2 Libraries

star icon219

7

LancerComet

2 Libraries

star icon126

8

lfyfly

2 Libraries

star icon42

9

Akryum

2 Libraries

star icon1846

10

jofftiquez

2 Libraries

star icon282

1

3 Libraries

star icon12387

2

2 Libraries

star icon158

3

2 Libraries

star icon39

4

2 Libraries

star icon66

5

2 Libraries

star icon62

6

2 Libraries

star icon219

7

2 Libraries

star icon126

8

2 Libraries

star icon42

9

2 Libraries

star icon1846

10

2 Libraries

star icon282

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:36

I 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:36

This 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.

Source https://stackoverflow.com/questions/67210557

QUESTION

TYPO3 Aspect PersistedAliasMapper not working as wanted

Asked 2020-Sep-15 at 08:33

I 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:33

As already mentioned by Thomas, you should remove routeValuePrefix: '/' which should solve the issue.

Source https://stackoverflow.com/questions/63594461

QUESTION

Spring security configuration with angular served by backend

Asked 2020-Jul-02 at 09:07

I'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;
10

and 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
36

For 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
37

Let 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>
92

backend 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>
129

The 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:07

You 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()
131

Adding /** in antMatchers will allow the user to access everything. Other urls which don't match will be automatically handled by spring security for authentication

Source https://stackoverflow.com/questions/62675168

QUESTION

How can I get a rootline / breadcrumb within an Extbase Frontent Plugin in TYPO3

Asked 2020-Mar-03 at 11:04

Is 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}
15

ANSWER

Answered 2020-Mar-02 at 21:59

Inside 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();
18

Now you can pass $rootlinePages on to your FLUID template.

Hth.

Source https://stackoverflow.com/questions/60492973

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

share link

Get latest updates on Frontend Plugin