Skip to content

Commit 43863cb

Browse files
committed
add basic landing pages for Vite build systems
1 parent 330c057 commit 43863cb

File tree

3 files changed

+56
-0
lines changed

3 files changed

+56
-0
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Ember supports two different build environments:
2+
3+
- Our [Vite integration](./vite) works on all Ember versions back to 3.28. It became the default for newly-generated apps at Ember 6.8.
4+
- The legacy [EmberCLI-based build](https://cli.emberjs.com/release/) is also still supported on all Ember versions.
5+
6+
You can tell which one you're using based on the presence of `@embroider/vite` in your `package.json` file.
7+
8+
Existing apps can use [Ember Vite Codemod](https://github.com/mainmatter/ember-vite-codemod) to switch from the EmberCLI-based build to the Vite-based build.
9+
10+
On Ember versions after 6.8, you can optionally choose to generate a new app using the older build environment via:
11+
12+
```sh
13+
npx ember-cli@ new my-app-name -b @ember-tooling/classic-build-app-blueprint
14+
```
15+
16+
17+

guides/release/build-tools/vite.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
When you generate a new Ember app your default build system will be using Vite.
2+
3+
> Vite is a blazing fast frontend build tool powering the next generation of web applications.
4+
5+
You can read more about [Vite on their documentation](https://vite.dev/guide/) site. Ember's Vite implementation is [powered by Embroider](https://github.com/embroider-build/embroider), which acts as a Vite plugin that allows Vite to effectively build an Ember app.
6+
7+
## Basic Usage
8+
9+
For most developers the only interaction that they will have with the build system is running the `npm start`, or `npm run build` scripts defined in their `package.json`. If you have a look at your `package.json` scripts you will see that they are just deferring to `vite` (which by default runs `vite dev` and starts the Vite dev server) and `vite build` respectively.
10+
11+
You can see more docs on these commands in the Vite documentation
12+
13+
### Sensible defaults
14+
15+
As Ember developers we expect reasonable defaults, because of that we have provided a default vite config for you that takes care of most of the Vite configuration you need as an Ember developer. For example, we automatically include your `tests/index.html` in the `build.rollupOptions.input` when you are building in `develoment` mode so that you can navigate to http://localhost:4200/tests/
16+
17+
For most applications you will not need to override the config that we provide by default, instead you can just add to the config as you need. If you do need to change the defaults that we provide, you can just define the new configuration in your `vite.config.js` because anything you define there will take precedence over anything we provide.
18+
19+
20+
### Integrating 3rd party plugins
21+
22+
Now that Ember uses Vite for its build system, you no longer need an Ember-specific plugin to augment your build. If you find a Vite or rollup plugin that you would like to use you can follow the installation instructions to add that to your `vite.config.js` without any Ember-specific instructions necessary.
23+
24+
## Advanced Usage
25+
26+
Most developers will not need to change the defaults that we provide, but in some rare cases it can be useful to know how to change the defaults.
27+
28+
### Running Tests Against Production Code
29+
30+
By default, we don't build your tests when you build for production. This is because, in most cases, people don't want their tests included in the bundle they ship to end-users. This means if you run `npm run build` in your app it will default to `--mode production` (because this is [the default for `vite build`](https://vite.dev/config/shared-options.html#mode)) and it will not include your tests in your build output.
31+
32+
If you needed to run your tests against your production environment for any reason (maybe you have a vite/rollup plugin that you only run during your production build) then you can use the `FORCE_BUILD_TESTS=true` environment variable. This is just a convenience in the code that the default `ember()` plugin provides, you can always define your inputs in the `vite.config.js` which will take precedent over anything we're doing automatically for you in the `ember()` plugin.

guides/release/pages.yml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,13 @@
298298
- title: "Developer Tools"
299299
url: "toc-heading_developer-tools"
300300
is_heading: true
301+
- title: "Build Tooling"
302+
url: "build-tools"
303+
pages:
304+
- title: "Introduction"
305+
url: "index"
306+
- title: "Vite"
307+
url: "vite"
301308
- title: "Ember Inspector"
302309
url: "ember-inspector"
303310
pages:

0 commit comments

Comments
 (0)