Establishing communication between iframe and host project via postMessage API in react project.
"host-project" can be any project inside which our iframe is being used. "iframe-project" contains our iframe.
Install & run individual projects separately to test the setup. Update necessary urls.
Remember:
- Update the allowed hosts inside the iframe project.
- Update the iframe domain url inside the host projects as needed.
To test without updating urls:
- Run iframe on port 5173, and host project on 5174 (i.e http://localhost:5174) i.e run npm dev first for iframe and then for host.
- host-project-2 on http://127.0.0.1:5500
Command to make project run on a particular port:
npm run dev -- --port 5174