\n```\n\n### The problem with SOP\n\nSingle-Origin Policy (SOP) could be a problem if we want to develop our app. Because the webpack-dev-server runs on http://localhost:8080 and our Spring Boot REST backend on http://localhost:8098.\n\nWe need to use Cross-Origin Resource Sharing Protocol (CORS) to handle that (read more background info about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)\n\n\n#### Enabling Axios CORS support\n\nCreate a central Axios configuration file called `http-commons.js`:\n\n```js\nimport axios from 'axios'\n\nexport const AXIOS = axios.create({\n baseURL: `http://localhost:8098`,\n headers: {\n 'Access-Control-Allow-Origin': 'http://localhost:8080'\n }\n})\n```\n\nHere we allow requests to the base URL of our Spring Boot App on port 8098 to be accessible from 8080.\n\nNow we could use this configuration inside our Components, e.g. in `Hello.vue`:\n```js\nimport {AXIOS} from './http-common'\n\nexport default {\n name: 'hello',\n\n data () {\n return {\n posts: [],\n errors: []\n }\n },\n methods: {\n // Fetches posts when the component is created.\n callRestService () {\n AXIOS.get(`hello`)\n .then(response => {\n // JSON responses are automatically parsed.\n this.posts = response.data\n })\n .catch(e => {\n this.errors.push(e)\n })\n }\n }\n```\n\n#### Enabling Spring Boot CORS support\n\nAdditionally, we need to configure our Spring Boot backend to answer with the appropriate CORS HTTP Headers in its responses (there's a good tutorial here: https://spring.io/guides/gs/rest-service-cors/). Therefore we add the annotation `@CrossOrigin` to our BackendController:\n\n```java\n@CrossOrigin(origins = \"http://localhost:8080\")\n@RequestMapping(path = \"/hello\")\npublic @ResponseBody String sayHello() {\n LOG.info(\"GET called on /hello resource\");\n return HELLO_TEXT;\n}\n```\n\nNow our Backend will respond CORS-enabled and will accept requests from 8080. But as this only enables CORS on one method, we have to repeatedly add this annotation to all of our REST endpoints, which isn’t a nice style. We should use a global solution to allow access with CORS enabled to all of our REST resources. This could be done in the `SpringBootVuejsApplication.class`:\n\n```java\n// Enable CORS globally\n@Bean\npublic WebMvcConfigurer corsConfigurer() {\n return new WebMvcConfigurerAdapter() {\n @Override\n public void addCorsMappings(CorsRegistry registry) {\n registry.addMapping(\"/api/*\").allowedOrigins(\"http://localhost:8080\");\n }\n };\n}\n```\n\nNow all calls to resources behind `api/` will return the correct CORS headers. \n\n\n#### But STOP! Webpack & Vue have something much smarter for us to help us with SOP!\n\nThanks to my colleague [Daniel](https://www.codecentric.de/team/dre/) who pointed me to the nice proxying feature of Webpack dev-server, we don't need to configure all the complex CORS stuff anymore!\n\nAccording to the [Vue CLI 3 docs](https://cli.vuejs.org/config) the only thing we need to [configure is a devserver-proxy](https://cli.vuejs.org/config/#devserver-proxy) for our webpack devserver requests. This could be done easily in the optional [vue.config.js](https://cli.vuejs.org/config/#vue-config-js) inside `devServer.proxy`: \n\n```js\nmodule.exports = {\n // proxy all webpack dev-server requests starting with /api\n // to our Spring Boot backend (localhost:8098) using http-proxy-middleware\n // see https://cli.vuejs.org/config/#devserver-proxy\n devServer: {\n proxy: {\n '/api': {\n target: 'http://localhost:8098',\n ws: true,\n changeOrigin: true\n }\n }\n },\n ...\n}\n```\n\nWith this configuration in place, the webpack dev-server uses the [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), which is a really handy component, to proxy all frontend-requests from http://localhost:8080 --> http://localhost:8098 - incl. Changing the Origin accordingly.\n\nThis is used in the webpack build process to configure the proxyMiddleware (you don't need to change something here!):\n\n```js\n// proxy api requests\nObject.keys(proxyTable).forEach(function (context) {\n var options = proxyTable[context];\n if (typeof options === 'string') {\n options = { target: options }\n }\n app.use(proxyMiddleware(options.filter || context, options))\n})\n```\n\n## Using history mode for nicer URLs\n\nIf we use the default configuration of the generated Vue.js template, we see URLs with a `#` inside them - like this:\n\n```\nhttp://localhost:8098/#/bootstrap\n\nor\n\nhttp://localhost:8098/#/user\n```\n\nWith the usage of __[HTML5 history mode](https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode)__, we can achieve much nicer URLs without the `#` in them. Only thing to do in the Vue.js frontend is to configure our router accordingly inside the [router.js](frontend/src/router.js):\n\n```\n...\n\nVue.use(Router);\n\nconst router = new Router({\n mode: 'history', // uris without hashes #, see https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode\n routes: [\n { path: '/', component: Hello },\n { path: '/callservice', component: Service },\n ...\n```\n\nThat's nearly everything. BUT only nearly! If one clicks on a link inside our frontend, the user is correctly send to the wished component. \n\nBut if the user enters the URL directly into the Browser, we get a `Whitelabel Error Page` because our Spring Boot backend gives us a __HTTP 404__ - since this URL isn't present in the backend:\n\n![html5-history-mode-whitelabel-error-page-404](screenshots/html5-history-mode-whitelabel-error-page-404.gif)\n\nThe solution is to redirect or better forward the user to the frontend (router) again. The [Vue.js docs don't provide an example configuration for Spring Boot](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations), but luckily [there are other resources](https://www.baeldung.com/spring-redirect-and-forward). In essence we have to implement a forwarding controller in our [BackendController](backend/src/main/java/de/jonashackt/springbootvuejs/controller/BackendController.java):\n\n```\n // Forwards all routes to FrontEnd except: '/', '/index.html', '/api', '/api/**'\n // Required because of 'mode: history' usage in frontend routing, see README for further details\n @RequestMapping(value = \"{_:^(?!index\\\\.html|api).$}\")\n public String redirectApi() {\n LOG.info(\"URL entered directly into the Browser, so we need to redirect...\");\n return \"forward:/\";\n }\n```\n\nThis controller will forward every request other then `'/', '/index.html', '/api', '/api/**'` to our Vue.js frontend.\n\n\n## Bootstrap & Vue.js\n\nThere’s a nice integration of Bootstrap in Vue.js: https://bootstrap-vue.js.org/\n\n```\nnpm install bootstrap-vue\n```\n\nNow you can use all the pretty Bootstrap stuff with ease like:\n\n```\nCALL Spring Boot REST backend service\n```\n\ninstead of\n\n```\n\n```\n\nThe docs contain all the possible components: https://bootstrap-vue.js.org/docs/components/alert/\n\nSee some elements, when you go to http://localhost:8080/#/bootstrap/ - this should look like this:\n\n![bootstrap-styled-vuejs](screenshots/bootstrap-styled-vuejs.png)\n\nA good discussion about various UI component frameworks: http://vuetips.com/bootstrap\n\n\n## Heroku Deployment\n\nAs you may already read, the app is automatically deployed to Heroku on https://spring-boot-vuejs.herokuapp.com/.\n\nThe project makes use of the nice Heroku Pipelines feature, where we do get a full Continuous Delivery pipeline with nearly no effort:\n\n![heroku-pipeline](screenshots/heroku-pipeline.png)\n\nAnd with the help of super cool `Automatic deploys`, we have our GitHub Actions build our app after every push to master - and with the checkbox set to `Wait for CI to pass before deploy` - the app gets also automatically deployed to Heroku - but only, if the GitHub Actions (and Codegov...) build succeeded:\n\n![heroku-automatic-deploys](screenshots/heroku-automatic-deploys.png)\n\nYou only have to connect your Heroku app to GitHub, activate Automatic deploys and set the named checkbox. That's everything!\n\n\n#### Accessing Spring Boot REST backend on Heroku from Vue.js frontend\n\nFrontend needs to know the Port of our Spring Boot backend API, which is [automatically set by Heroku every time, we (re-)start our App](https://stackoverflow.com/a/12023039/4964553).\n\n> You can [try out your Heroku app locally](https://devcenter.heroku.com/articles/heroku-local)! Just create a .env-File with all your Environment variables and run `heroku local`! \n\nTo access the Heroku set port, we need to use relative paths inside our Vue.js application instead of hard-coded hosts and ports! \n\nAll we need to do is to configure Axios in such a way inside our [frontend/src/components/http-common.js](https://github.com/jonashackt/spring-boot-vuejs/blob/master/frontend/src/components/http-common.js):\n\n```\nexport const AXIOS = axios.create({\n baseURL: `/api`\n})\n```\n\n#### Using Heroku's Postgres as Database for Spring Boot backend and Vue.js frontend\n\nFirst, add [Heroku Postgres database](https://elements.heroku.com/addons/heroku-postgresql) for your Heroku app. \n\nThen follow these instructions on Stackoverflow to configure all needed Environment variables in Heroku: https://stackoverflow.com/a/49978310/4964553\n\nMind the addition to the backend's [pom.xml](backend/pom.xml) described here: https://stackoverflow.com/a/49970142/4964553\n\nNow you're able to use Spring Data's magic - all you need is an Interface like [UserRepository.java](backend/src/main/java/de/jonashackt/springbootvuejs/repository/UserRepository.java):\n\n```java\npackage de.jonashackt.springbootvuejs.repository;\n\nimport de.jonashackt.springbootvuejs.domain.User;\nimport org.springframework.data.repository.CrudRepository;\nimport org.springframework.data.repository.query.Param;\n\nimport java.util.List;\n\npublic interface UserRepository extends CrudRepos","has_starred","hub_user","immutable_tags_settings",{"_75":11,"_76":77},"enabled","rules",[78],".*","is_automated","permissions",{"_82":21,"_83":11,"_84":11},"read","write","admin","user","storage_size",22651230907,"orgData","recentTags",[91],{"_92":44,"_93":94,"_95":96,"_97":98,"_99":100,"_50":118,"_119":94,"_120":33,"_121":56,"_57":122,"_123":124,"_125":109,"_126":118,"_127":65,"_128":21},"content_type","creator",205712,"full_size",290387881,"id",74816462,"images",[101],{"_102":103,"_104":105,"_106":107,"_108":109,"_110":111,"_112":113,"_114":107,"_115":-5,"_116":96,"_63":65,"_117":-5},"architecture","amd64","digest","sha256:c0e82ddc4bbb8c71a22988c366a646f0bc752df116394807abc7fd067de95de4","features","","last_pulled","2026-10-01T09:11:40.84152521Z","last_pushed","2021-07-26T18:38:20Z","os","linux","os_features","os_version","size","variant","2021-07-26T18:38:19.434937Z","last_updater","last_updater_username","media_type","latest","repository",7952742,"tag_last_pulled","tag_last_pushed","tag_status","v2","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","showSbxLogoOverride","sbxTrademarkText","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"selectedTag","attestationsUrl","routes/_layout.r.$namespace.$reponame.tags",{"_38":142,"_149":150,"_136":159,"_160":11},{"_40":143,"_42":144,"_45":46,"_47":48,"_49":11,"_50":51,"_52":53,"_54":145,"_57":35,"_32":33,"_58":59,"_60":44,"_61":62,"_63":62,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":11,"_72":33,"_73":146,"_79":11,"_80":148,"_85":33,"_86":87},[],[44],[56],{"_75":11,"_76":147},[78],{"_82":21,"_83":11,"_84":11},"tags",{"_151":62,"_152":-5,"_153":-5,"_154":155},"count","next","previous","results",[156],{"_92":44,"_93":94,"_95":96,"_97":98,"_99":157,"_50":118,"_119":94,"_120":33,"_121":56,"_57":122,"_123":124,"_125":109,"_126":118,"_127":65,"_128":21},[158],{"_102":103,"_104":105,"_106":107,"_108":109,"_110":111,"_112":113,"_114":107,"_115":-5,"_116":96,"_63":65,"_117":-5},[],"canDeleteTags","actionData","errors"]

{{ response }}

jonashackt/spring-boot-vuejs

Tags for jonashackt/spring-boot-vuejs