Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(v6): specify that the custom web index webpack only #8772

Merged
merged 2 commits into from
Jun 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions docs/docs/cli-commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -1779,6 +1779,13 @@ yarn redwood setup cache <client>

### setup custom-web-index

:::caution This command only applies to projects using Webpack

As of v6, all Redwood projects use Vite by default.
When switching projects to Vite, we made the decision to add the the entry file, `web/src/entry.client.{jsx,tsx}`, back to projects.

:::

Redwood automatically mounts your `<App />` to the DOM, but if you want to customize how that happens, you can use this setup command to generate an `index.js` file in `web/src`.

```
Expand Down
9 changes: 9 additions & 0 deletions docs/docs/custom-web-index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ description: Change how App mounts to the DOM

# Custom Web Index

:::caution This doc only applies to projects using Webpack

As of v6, all Redwood projects use Vite by default.
When switching projects to Vite, we made the decision to add the the entry file, `web/src/entry.client.{jsx,tsx}`, back to projects.

If you're using Webpack, this is all still applicable—keep reading.

:::

You may have noticed that there's no call to `ReactDOM.render` in your Redwood app.
That's because Redwood automatically mounts the `App` component in `web/src/App.js` to the DOM.
But if you need to customize how this happens, you can provide a file named `index.js` in `web/src` and Redwood will use that instead.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ import { getPaths, writeFile } from '../../../lib'
import c from '../../../lib/colors'

export const handler = async ({ force }) => {
if (getPaths().web.viteConfig) {
console.warn(
c.warning('Warning: This command only applies to projects using webpack')
)
return
}

const tasks = new Listr(
[
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { recordTelemetryAttributes } from '@redwoodjs/cli-helpers'
export const command = 'custom-web-index'

export const description =
'Set up a custom index.js file, so you can customise how Redwood web is mounted in your browser'
'Set up a custom index.js file, so you can customise how Redwood web is mounted in your browser (webpack only)'

export const builder = (yargs) => {
yargs.option('force', {
Expand Down