feat(devtools): ability to change ports and domains in devtools server

aliemir commented 3 months ago

PR Checklist

Please check if your PR fulfills the following requirements:

[x] The commit message follows our guidelines: https://refine.dev/docs/guides-concepts/contributing/#commit-convention

Bugs / Features

[x] Related issue(s) linked
[x] Tests for the changes have been added
[x] Docs have been added / updated
[x] Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

Changes

fix(cli): avoid polluting process.env with unwanted environment variables

Previously, the @refinedev/cli used dotenv to load environment variables from .env files and populate process.env. This caused issues when the users app has a different convention for environment variables, e.g. .env.development, .env.production, etc.

Now, the @refinedev/cli will read the file but avoid populating process.env with the variables and keep the values in its scope without passing them to the child processes. This will prevent unwanted environment variables from being passed to the child processes and avoid conflicts with the user's environment variables.

Resolves #5803

feat(devtools): ability to change the port of the devtools server

Now users can change the port of the devtools server by setting the REFINE_DEVTOOLS_PORT environment variable. Previously, the port was hardcoded to "5001" and could not be changed.

If you're using @refinedev/cli's runner commands to start your development server, REFINE_DEVTOOLS_PORT will be propagated to your app with appropriate prefix. E.g. if you're using Vite, the environment variable will be VITE_REFINE_DEVTOOLS_PORT and it will be used by the @refinedev/devtools's <DevtoolsProvider /> component to connect to the devtools server.

In Next.js apps, it will be prefixed with NEXT_PUBLIC_
In Craco and Create React App apps, it will be prefixed with REACT_APP_
In Remix apps and other custom setups, the environment variable will be used as is.

In some scenarios where the environment variables are not passed to the browser, you may need to manually set the Refine Devtools URL in the <DevtoolsProvider /> component via the url prop. Remix apps do not automatically pass environment variables to the browser, so you will need to set the URL manually. If not set, the default URL will be used.

While the port can be changed, this feature also allows users to host the devtools server on a different machine or domain and provide the <DevtoolsProvider /> with the custom domain URL. This such case will be useful if you're dockerizing your app and devtools server separately.

Enterprise Edition: Refine Devtools running on ports other than "5001" is only available in the Enterprise Edition. If you're using the Community Edition, Refine Devtools will not work if the port is changed.

Resolves #5111

changeset-bot[bot] commented 3 months ago

🦋 Changeset detected

Latest commit: d143f0e08674856c41a770e9056f5c55edbaf135

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

| Name | Type | | ---------------------------- | ----- | | @refinedev/core | Patch | | @refinedev/cli | Patch | | @refinedev/devtools-server | Minor | | @refinedev/devtools-shared | Minor | | @refinedev/devtools-ui | Minor | | @refinedev/devtools | Major | | @refinedev/devtools-internal | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

cypress[bot] commented 3 months ago

Passing run #11348 ↗︎

0

381

37

0

Details:

Merge 6c3535ace44070483fe2fa767de32daff7d4a9ec into 466a68cc4d91933400e70ba54b7b...
Project: refine	Commit: `fa0d88b616 ℹ️`
Status: Passed	Duration: 18:56 💡
Started: Jul 25, 2024 1:51 PM	Ended: Jul 25, 2024 2:10 PM

refinedev / refine