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

[aliemir]

PR Checklist

Please check if your PR fulfills the following requirements:

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

Bugs / Features

• Related issue(s) linked
• Tests for the changes have been added
• Docs have been added / updated
• 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]

🦋 Changeset detected

Latest commit: d143f0e

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]

Passing run #11348 ↗︎

0

381

37

0

0

Details:

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

Review all test suite changes for PR #6185 ↗︎

[BatuhanW]

Great stuff. ❤️