{"id":17401497,"url":"https://github.com/samie/vaadin-cors-sample","last_synced_at":"2025-03-27T22:20:00.716Z","repository":{"id":250133771,"uuid":"833094763","full_name":"samie/vaadin-cors-sample","owner":"samie","description":"Sample of embedded Vaadin application and cross-domain CORS settings.","archived":false,"fork":false,"pushed_at":"2024-08-23T06:09:29.000Z","size":186,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T00:35:25.637Z","etag":null,"topics":["cors","java","microfrontends","vaadin","vaadin-24"],"latest_commit_sha":null,"homepage":"https://samie.github.io/vaadin-cors-sample/","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-24T10:44:31.000Z","updated_at":"2024-11-18T18:37:02.000Z","dependencies_parsed_at":"2024-08-05T14:11:03.896Z","dependency_job_id":null,"html_url":"https://github.com/samie/vaadin-cors-sample","commit_stats":null,"previous_names":["samie/vaadin-cors-sample"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samie%2Fvaadin-cors-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samie%2Fvaadin-cors-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samie%2Fvaadin-cors-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samie%2Fvaadin-cors-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samie","download_url":"https://codeload.github.com/samie/vaadin-cors-sample/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245932022,"owners_count":20695984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cors","java","microfrontends","vaadin","vaadin-24"],"created_at":"2024-10-16T16:24:15.583Z","updated_at":"2025-03-27T22:20:00.691Z","avatar_url":"https://github.com/samie.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cross-site Vaadin Embedding Sample\n\nThis project demonstrates how to configure Cross-Origin Resource Sharing (CORS) in a Vaadin application with Spring Boot. \nIt includes essential configuration and example files to help you quickly set up CORS in your own projects, ensuring \nsecure resource sharing across different origins.\n\nDemo is running at: https://samie.github.io/vaadin-cors-sample/\n\n\n```mermaid\nsequenceDiagram\n    actor UserBrowser as User/Browser\n    participant WebsiteDomain as Website (github.io)\n    participant AppDomain as Application (fly.io)\n\n    UserBrowser-\u003e\u003e+WebsiteDomain: Open https://samie.github.io/vaadin-cors-sample/\n    WebsiteDomain-\u003e\u003e-UserBrowser: Serve HTML\n\n    UserBrowser-\u003e\u003e+AppDomain: Preflight OPTIONS Request\n    AppDomain-\u003e\u003e-UserBrowser: CORS Headers\n\n    UserBrowser-\u003e\u003e+AppDomain: Request newsletter-subscription.js\n    AppDomain-\u003e\u003e-UserBrowser: newsletter-subscription.js (Web Component)\n\n    loop Vaadin application interaction\n        UserBrowser--\u003e\u003e+AppDomain: User events (GET)\n        AppDomain--\u003e\u003e-UserBrowser: UI Updates\n     end\n\n%%{\n  init: {\n    'theme':'base',\n    'themeVariables': {\n      'background': '#FFFFFF',\n      'fontFamily': 'Arial',\n      'fontSize': '20px',\n      'lineColor': '#657892',\n      'primaryColor': '#F1F5FB',\n      'primaryBorderColor': '#BBC9DC',\n      'primaryTextColor': '#0D1219',\n      'secondaryColor': '#95C6FF',\n      'secondaryBorderColor': '#BBC9DC',\n      'secondaryTextColor': '#657892',\n      'tertiaryColor': '#ff0000',\n      'tertiaryBorderColor': '#BBC9DC',\n      'tertiaryTextColor': '#0D1219',\n      'signalColor':'#BBC9DC',\n      'sequenceNumberColor':'#0D1219',\n      'labelBoxBorderColor' :'#BBC9DC',\n      'labelTextColor': '#0D1219',\n      'actorBkg': '#F1F5FB',\n      'actorBorder': '#BBC9DC',\n      'actorTextColor': '#0D1219'\n    }\n  }\n}%%\n\n```\n\nThere are two branches in this repository:\n1. [main](https://github.com/samie/vaadin-cors-sample/tree/main) - The embedded Vaadin application. It implements a simple newsletter subscription view (stores no data).\n2. [website](https://github.com/samie/vaadin-cors-sample/tree/website) - Simple website that embeds the application running on another domain.\n\nThis project was created from [start.vaadin.com](https://start.vaadin.com/).\n\n## Running the application\n\nThe project is a standard Maven project. To run it from the command line,\nRun Maven build `mvn`, then open http://localhost:8080 in your browser.\n\nYou can also import the project to your IDE of choice as you would with any\nMaven project. Read more on [how to import Vaadin projects to different IDEs](https://vaadin.com/docs/latest/guide/step-by-step/importing) (Eclipse, IntelliJ IDEA, NetBeans, and VS Code).\n\n## Deploying to Production\n\nTo create a production build, call `mvn clean package -Pproduction`.\nThis will build a JAR file with all the dependencies and front-end resources,\nready to be deployed. The file can be found in the `target` folder after the build completes.\n\nOnce the JAR file is built, you can run it using\n`java -jar target/my-app-1.0-SNAPSHOT.jar`\n\n## Building the Docker Image\n\nTo build the Docker image, navigate to the project directory where the `Dockerfile` is located and run the following command:\n\n```bash\ndocker build -t vaadin-cors-sample .\n```\n\nThis command builds a Docker image using the `Dockerfile` in the current directory and tags the image as `vaadin-cors-sample`.\n\n## Running the Docker Image\n\nTo run the Docker image, use the following command:\n\n```bash\ndocker run -p 8080:8080 vaadin-cors-sample\n```\n\nThis command runs the Docker image you previously built. The `-p 8080:8080` option maps the container's port 8080 to your machine's port 8080.\n\nNow, you can access the application at http://localhost:8080.\n\n\n## Required Vaadin application configuration\n\nTo make the application available for cross-origin requests, ensure the following:\n1. Enable SSL for secure HTTPS connections.\n2. Configure the session cookie header with SameSite=None and Secure.\n3. Add necessary CORS headers `Access-Control-Allow-Origin`, `Access-Control-Allow-Credentials`, `Access-Control-Allow-Methods`, and `Access-Control-Allow-Headers` to responses. \n4. Properly handle the preflight `OPTIONS` requests. \n5. Use an explicit list of allowed domains for the `Access-Control-Allow-Origin` header instead of just `*`.\n\nYou can check the [source code](https://github.com/samie/vaadin-cors-sample/blob/main/src/main/java/com/example/application/Application.java#L40) to see how these were implemented for Spring Boot.\n\n## Embedding to another website\n\nThis project demonstrates how to add required HTTP headers to serve the application across domains.\nWhen embedding the application you need to do two things:\n1. Register the web component in you html head section: `\u003cscript type=\"module\" src=\"https://vaadin-cors-sample.fly.dev/web-component/newsletter-subscription.js\"\u003e\u003c/script\u003e`\n2. Embed the web component to you page body: `\u003cnewsletter-subscription\u003e\u003c/newsletter-subscription\u003e`\n\n## Useful links\n\n- Read the documentation at [vaadin.com/docs](https://vaadin.com/docs).\n- Follow the tutorial at [vaadin.com/docs/latest/tutorial/overview](https://vaadin.com/docs/latest/tutorial/overview).\n- Create new projects at [start.vaadin.com](https://start.vaadin.com/).\n- Search UI components and their usage examples at [vaadin.com/docs/latest/components](https://vaadin.com/docs/latest/components).\n- View use case applications that demonstrate Vaadin capabilities at [vaadin.com/examples-and-demos](https://vaadin.com/examples-and-demos).\n- Build any UI without custom CSS by discovering Vaadin's set of [CSS utility classes](https://vaadin.com/docs/styling/lumo/utility-classes). \n- Find a collection of solutions to common use cases at [cookbook.vaadin.com](https://cookbook.vaadin.com/).\n- Find add-ons at [vaadin.com/directory](https://vaadin.com/directory).\n- Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/vaadin) or join our [Discord channel](https://discord.gg/MYFq5RTbBn).\n- Report issues, create pull requests in [GitHub](https://github.com/vaadin).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamie%2Fvaadin-cors-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamie%2Fvaadin-cors-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamie%2Fvaadin-cors-sample/lists"}