[JAVA] Example of using vue.config.js

Premise

When developing web services and web applications using the SPA framework on the front-end side, I think that it will be created by combining it with popular back-end languages and back-end frameworks such as Ruby on Rails and Laravel these days. This is because Vue and React are implemented in advance in the backend environment as plug-ins during initial development, making it easier to introduce.

In this project, we developed using Java and separated the directories, so we would appreciate it if you could call it as an article for such a project.

Login function

As you can see in the approximate web service, the project we developed this time also had a login function. Java is responsible for the login screen and login process. View uses the Java template engine Thymeleaf.

After logging in, the specified token and cookie are retained on the browser side and fibered to the dashboard. The screens and processes beyond the dashboard are the responsibility of the SPA.

Challenges in the development environment

As mentioned above, this project started with the Java side and the directory separated. In other words, the command to start each development environment and the host were separated in the following state. Java --Project start --Access localhost: 8080 Vue.js --Start $ yarn serve --Access localhost: 8888

For this reason, it was not easy to confirm the API combination locally, such as the fiber from the login screen and the redirect process when the login evaluation was negative.

solution

I was able to solve it by describing it in the proxy of vue.config.js.

module.exports = {
  devServer: {
    port: 8888,
    disableHostCheck: true,
    host: 'localhost',
    proxy: {
      '/api': {
        target: 'http://localhost:8080'
      },
      '/top': {
        target: 'http://localhost:8080'
      },
      '/login': {
        target: 'http://localhost:8080'
      }
    }
  },
}

Summary

There may not be many scenes like this one, but if there are similar scenes, please refer to them. If you know of any other good solutions, please let us know in the comments.

Recommended Posts

Example of using vue.config.js
Example of params using where
Example of using abstract class
[Kotlin] Example of processing using Enum
Example of using ArAutoValueConverter (field type conversion)
Summary of using FragmentArgs
Example of using addition faster than using StringBuilder (Java)
Summary of using DBFlow
Summary of using Butter Knife
Rate-Limiting using RateLimiter of Resilience4j
Enumeration of combination patterns using List
Development of Flink using DataStream API
Validation of log messages using mockito
Handling of time zones using Java
Implementation of validation using regular expressions
Application example of design pattern (No. 1)
Acquisition of location information using FusedLocationProviderClient
Summary of object-oriented programming using Java
I tried using GoogleHttpClient of Java
[Android] Implementation of side-scrolling ListView using RecyclerView
Find an approximation of sinx using Swift
Try using || instead of the ternary operator
Introduction memo of automatic test using Jenkins
Implementation of user authentication function using devise (2)
Using Hystrix and Sentinel in code example
Test the integrity of the aggregation using ArchUnit ②
Implementation of user authentication function using devise (1)
Setting example of IntellijIDEA + SpringBoot + Gradle + MyBatis
Implementation of tabs using TabLayout and ViewPager
Status monitoring of java application using Elasticsearch
Implementation of user authentication function using devise (3)
Super easy deployment of applications using Waypoint
Using SSIServlet with built-in Tomcat of SpringBoot 2.2.4
Create RestAPI using wicketstuff-restannotations of Apache Wicket
Acquisition of input contents using Scanner (Java)
A simple example of an MVC model
Test the integrity of the aggregation using ArchUnit ③
Sample code for search using QBE (Query by Example) of Spring Data JPA