diff --git a/.local.dic b/.local.dic index 1e1a743530..ba68959db6 100644 --- a/.local.dic +++ b/.local.dic @@ -22,7 +22,7 @@ BelongsTo blockquote blogPost bookmarklet -Browserlist +Browserslist callouts camelize centric @@ -52,6 +52,7 @@ debounce declaratively DefinitelyTyped deps +dev draggable dropdown durations @@ -62,6 +63,7 @@ els-addon-typed-templates ember-a11y ember-a11y-refocus ember-a11y-testing +ember-cli ember-cli-cjs-transform ember-cli-deprecation-workflow ember-cli-document-title @@ -130,6 +132,7 @@ linters lookups LSP Mapbox +TomTom MDN metaprogramming misspelt @@ -178,6 +181,8 @@ rerender rerendering rerenders RequestManager +rollup +Rollup routable RunDOC runnable @@ -217,6 +222,7 @@ templating TextMate todo todos +toolchain tooltip tooltips trackable @@ -253,3 +259,6 @@ working-with-html-css-and-javascript yay ZEIT userQuestion +vite +Vite +bundler diff --git a/.remarkignore b/.remarkignore index b7b2856dea..3cc0087a9b 100644 --- a/.remarkignore +++ b/.remarkignore @@ -5,36 +5,9 @@ MAINTAINERS.md # old major versions guides/v1*/**/*.md guides/v2*/**/*.md - -# current major version -guides/v3.0.0/**/*.md -guides/v3.1.0/**/*.md -guides/v3.2.0/**/*.md -guides/v3.3.0/**/*.md -guides/v3.4.0/**/*.md -guides/v3.5.0/**/*.md -guides/v3.6.0/**/*.md -guides/v3.7.0/**/*.md -guides/v3.8.0/**/*.md -guides/v3.9.0/**/*.md -guides/v3.10.0/**/*.md -guides/v3.11.0/**/*.md -guides/v3.12.0/**/*.md -guides/v3.13.0/**/*.md -guides/v3.14.0/**/*.md -guides/v3.15.0/**/*.md -guides/v3.16.0/**/*.md -guides/v3.17.0/**/*.md -guides/v3.18.0/**/*.md -guides/v3.19.0/**/*.md -guides/v3.20.0/**/*.md -guides/v3.21.0/**/*.md -guides/v3.22.0/**/*.md -guides/v3.23.0/**/*.md -guides/v3.24.0/**/*.md -guides/v3.25.0/**/*.md -guides/v3.26.0/**/*.md -guides/v3.27.0/**/*.md +guides/v3*/**/*.md +guides/v4*/**/*.md +guides/v5*/**/*.md # redirect only files guides/release/working-with-javascript diff --git a/guides/release/addons-and-dependencies/index.md b/guides/release/addons-and-dependencies/index.md index f47c65b1f5..96a5cb2c40 100644 --- a/guides/release/addons-and-dependencies/index.md +++ b/guides/release/addons-and-dependencies/index.md @@ -2,24 +2,19 @@ As you're developing your Ember app, you are likely to run into common scenarios Perhaps you want to use a CSS preprocessor to write your stylesheets, or you want to use a popular JS library, or maybe you want to import components written by a different department within your organization. -Ember CLI provides a common format called [Ember Addons](#toc_addons) for distributing reusable libraries to solve some +Ember provides a common format called [Ember Addons](#toc_addons) for distributing reusable libraries to solve some of these problems. Additionally, you may want to make use of front-end dependencies like a CSS framework or a JavaScript datepicker that aren't specific to Ember apps. ## Addons -Addons are JavaScript packages that integrate with Ember. For example, [`ember-cli-sass`](https://github.com/adopted-ember-addons/ember-cli-sass) -is an addon that allows you to use SASS/SCSS in your applications. You can install it using the Ember CLI with the following command: +Addons are JavaScript packages that integrate with Ember. For example, [`ember-concurrency`](https://github.com/machty/ember-concurrency) provides a concurrency primitive that you can use in your Ember app as well as a [Babel](https://babeljs.io/) plugin that makes it easier to use in an Ember application. You can install it just like any other npm package: ```bash -ember install ember-cli-sass +npm install --save-dev ember-cli-sass ``` -This will modify your `package.json` (and `package-lock.json` or `yarn.lock` or `pnpm-lock.yaml`), typically bringing in other dependencies. Some addons will also add -additional files to your projects when relevant. - -There are many addons that cover all kinds of use cases. For more detail, as well as examples of what addons can do, -we invite you to have a look at the [Ember CLI documentation](https://cli.emberjs.com/release/basic-use/using-addons/). +And then follow any additional instructions in the README of the addon. Some addons (like `ember-concurrency`) will give instructions for extra steps that you might need like installing a Babel plugin so it's always worthwhile reading the installation documentation. The Ember community publishes and maintains many addons, and it can be difficult to know if one (or many!) exists that covers your needs. The website [Ember Observer](https://www.emberobserver.com/) keeps an up-to-date index of Ember Addons, sorted by @@ -27,146 +22,10 @@ categories, and rated according to objective metrics. If you are looking for an ## Regular npm packages -While dependencies can be managed in several ways, -it's worth noting that the process can be greatly simplified for new developers by using ember-auto-import, -which offers zero config imports from npm packages. -It's built into new Ember apps by default and can be installed in older apps by using `ember install ember-auto-import`. -For further usage instructions, please follow the [project README](https://github.com/ef4/ember-auto-import). - -## Other assets - -Third-party JavaScript not available as an addon or npm package should be placed in the `vendor/` folder in your project. - -Your own assets (such as `robots.txt`, `favicon`, custom fonts, etc) should be placed in the `public/` folder in your project. - -## Compiling Assets - -When you're using dependencies that are not included in an addon, -you will have to instruct Ember CLI to include your assets in the build. -This is done using the asset manifest file `ember-cli-build.js`. -You should only try to import assets located in the `node_modules` and `vendor` folders. - -### Globals provided by JavaScript assets - -The globals provided by some assets (like `moment` in the below example) can be used in your application -without the need to `import` them. -Provide the asset path as the first and only argument. - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/moment/moment.js'); -``` - -You will need to add `"moment"` to the `globals` section in `.eslintrc.js` to prevent ESLint errors -about using an undefined variable. - -### Anonymous AMD JavaScript modules - -You can transform an anonymous AMD module to a named one by using the `amd` transformation. - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/moment/moment.js', { - using: [ - { transformation: 'amd', as: 'moment' } - ] -}); -``` - -This transformation allows you to `import` moment in your app. (e.g. `import moment from 'moment';`) - -### CommonJS JavaScript modules - -[ember-cli-cjs-transform](https://github.com/rwjblue/ember-cli-cjs-transform) allows us to import CommonJS modules into -our Ember app. It also does auto-rollup and some nice caching, so it should pull in all the deps that are pulled in -with `require` for you automatically. It is not yet included with Ember CLI by default, so you will need to install it. - -```bash -ember install ember-cli-cjs-transform -``` - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/showdown/dist/showdown.js', { - using: [ - { transformation: 'cjs', as: 'showdown' } - ] -}); -``` - -You can now `import` them in your app. (e.g. `import showdown from 'showdown';`) - -### Environment-Specific Assets +For newly generated Ember apps, the majority of the build is managed by [Vite](https://vite.dev/) which means that any npm packages or other assets can just be imported as you might expect in a modern build system or bundler. -If you need to use different assets in different environments, specify an object as the first parameter. -That object's key should be the environment name, and the value should be the asset to use in that environment. +In previous versions of Ember (before we moved to using Vite) there were other concepts that you would need to know to include 3rd party packages or assets in your app. If you are working on an Ember app that hasn't yet been upgraded to Vite you should look at [previous versions of this guide](/v6.7.0/addons-and-dependencies/) to get more information about the legacy build system. -```javascript {data-filename=ember-cli-build.js} -app.import({ - development: 'node_modules/moment/moment.js', - production: 'node_modules/moment/min/moment.min.js' -}); -``` - -If you need to import an asset in only one environment you can wrap `app.import` in an `if` statement. -For assets needed during testing, you should also use the `{type: 'test'}` option to make sure they -are available in test mode. - -```javascript {data-filename=ember-cli-build.js} -if (app.env === 'development') { - // Only import when in development mode - app.import('vendor/ember-renderspeed/ember-renderspeed.js'); -} -if (app.env === 'test') { - // Only import in test mode and place in test-support.js - app.import('node_modules/sinonjs/sinon.js', { type: 'test' }); - app.import('node_modules/sinon-qunit/lib/sinon-qunit.js', { type: 'test' }); -} -``` - -### CSS - -Provide the asset path as the first argument: - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/foundation/css/foundation.css'); -``` - -All style assets added this way will be concatenated and output as `/assets/vendor.css`. - -### Other Assets - -All assets located in the `public/` folder will be copied as is to the final output directory, `dist/`. - -For example, a `favicon` located at `public/images/favicon.ico` will be copied to `dist/images/favicon.ico`. - -All third-party assets, included either manually in `vendor/` or via a package manager like npm, must be added via `app.import()`. - -Third-party assets that are not added via `app.import()` will not be present in the final build. - -By default, `import`ed assets will be copied to `dist/` as they are, with the existing directory structure maintained. - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/font-awesome/fonts/fontawesome-webfont.ttf'); -``` - -This example would create the font file in `dist/font-awesome/fonts/fontawesome-webfont.ttf`. - -You can also optionally tell `import()` to place the file at a different path. -The following example will copy the file to `dist/assets/fontawesome-webfont.ttf`. - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/font-awesome/fonts/fontawesome-webfont.ttf', { - destDir: 'assets' -}); -``` - -If you need to load certain dependencies before others, -you can set the `prepend` property equal to `true` on the second argument of `import()`. -This will prepend the dependency to the vendor file instead of appending it, which is the default behavior. - -```javascript {data-filename=ember-cli-build.js} -app.import('node_modules/es5-shim/es5-shim.js', { - type: 'vendor', - prepend: true -}); -``` +To know more about how Vite can be configured, e.g. how it [handles static assets](https://vite.dev/guide/assets), you can consult their guides: [https://vite.dev/guide/](https://vite.dev/guide/) diff --git a/guides/release/build-tools/index.md b/guides/release/build-tools/index.md new file mode 100644 index 0000000000..510f9b0077 --- /dev/null +++ b/guides/release/build-tools/index.md @@ -0,0 +1,17 @@ +Ember supports two different build environments: + + - 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. + - The legacy [ember-cli based build](https://cli.emberjs.com/release/) is also still supported on all Ember versions. + +You can tell which one you're using based on the presence of `@embroider/vite` in your `package.json` file. + +Existing apps can use [Ember Vite Codemod](https://github.com/mainmatter/ember-vite-codemod) to switch from the ember-cli based build to the Vite based build. + +On Ember versions after 6.8, you can optionally choose to generate a new app using the older build environment via: + +```sh +npx ember-cli@ new my-app-name -b @ember-tooling/classic-build-app-blueprint +``` + + + diff --git a/guides/release/build-tools/vite.md b/guides/release/build-tools/vite.md new file mode 100644 index 0000000000..9accaaae6a --- /dev/null +++ b/guides/release/build-tools/vite.md @@ -0,0 +1,32 @@ +When you generate a new Ember app your default build system will be using Vite. + +> Vite is a blazing fast frontend build tool powering the next generation of web applications. + +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. + +## Basic Usage + +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. + +You can see more docs on these commands in the Vite documentation + +### Sensible defaults + +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/ + +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. + + +### Integrating 3rd party plugins + +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. + +## Advanced Usage + +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. + +### Running Tests Against Production Code + +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. + +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. diff --git a/guides/release/configuring-ember/build-targets.md b/guides/release/configuring-ember/build-targets.md index 7ebc02b56c..130036a0f7 100644 --- a/guides/release/configuring-ember/build-targets.md +++ b/guides/release/configuring-ember/build-targets.md @@ -1,14 +1,39 @@ -Ember application builds are created by the Ember CLI build pipeline. Just as with your application code, -Ember CLI ships with a sensible set of defaults to compile and bundle the assets that can be deployed -to production. Under the hood, this is accomplished using a series of Broccoli plugins, each of which -can be configured in the `ember-cli-build.js` file at the root of your project. - -Ember CLI uses [Babel.js](https://babeljs.io/) for the compile step in this process. If you've used Babel -before, you know that it comes with a large set of options, including the ability to configure -"targets"; i.e. the environments in which your application is expected to run. -For example, if your application is embedded in an [Electron app](https://www.electronjs.org), -you might only care about compiling for the latest Chromium build. Or if your app targets Enterprise -users, you may need to compile your JavaScript to older syntax that runs in IE11. - -For any of these cases, you can configure `ember build` to do The Right Thing. You can read more about -this in [the Ember CLI Guides](https://cli.emberjs.com/release/advanced-use/build-targets/)! +By default, Ember apps are built with Vite. The toolchain uses Babel, esbuild, and Rollup so you can write current-generation JavaScript and TypeScript while still allowing your application to work with older browsers. + +Rather than always compiling everything down to legacy syntax, Ember determines what—if anything—needs to be transformed based on the browsers you target. With today’s defaults aimed at evergreen browsers, many features (ES modules, classes, arrow functions, async/await, etc.) ship largely as-is. + +Why does this matter? Over-transpiling to very old JavaScript increases bundle size, slows parsing, and in some cases can slow down the execution of your JavaScript code. As the Web platform has advanced and percentage of users on legacy browsers have decreased, Ember’s default targets avoid unnecessary transforms to keep apps smaller and faster. + +If you need to update the defaults for any reason (i.e. need to target a very legacy browser), you can set the targets for your app and the compiler applies only the minimal transforms and polyfills required for those browsers. + +If you open `config/targets.js`, you will find the following code: + +```javascript {data-filename=config/targets.js} +"use strict"; + +const browsers = [ + "last 1 Chrome versions", + "last 1 Firefox versions", + "last 1 Safari versions", +]; + +module.exports = { + browsers, +}; +``` + +If you inspect your compiled code after running a build with `npm run build`, you'll see that many modern features (like arrow functions and async/await) preserved when your targets support them. + +This feature is backed by [Browserslist](https://github.com/ai/browserslist) and [Can I Use](https://caniuse.com/). +These websites track usage stats of browsers, so you can use complex queries based on the user base of every browser. + +If you want to target all browsers with more than a 4% market share in Canada, +you'd have the following options: + +```javascript {data-filename=config/targets.js} +module.exports = { + browsers: ["> 4% in CA"], +}; +``` + +It is very important that you properly configure the targets of your app so you get the smallest and fastest code possible. diff --git a/guides/release/configuring-ember/optional-features.md b/guides/release/configuring-ember/optional-features.md index 97dae1eef2..9bfc9399d0 100644 --- a/guides/release/configuring-ember/optional-features.md +++ b/guides/release/configuring-ember/optional-features.md @@ -7,15 +7,7 @@ To give the project a path forward when a breaking change is mandatory, we've re This addon does nothing by default, but provides a command-line interface to enable and disable breaking changes in Ember. -## Installation - -To get started with optional features, you must install the addon: - -```bash -ember install @ember/optional-features -``` - -This will make three new commands available to Ember CLI within your project, `feature:list`, `feature:enable`, and `feature:disable`. +`@ember/optional-features` is installed by default when generating a new ember application. ## Listing features diff --git a/guides/release/getting-started/quick-start.md b/guides/release/getting-started/quick-start.md index abe33ef64a..d1858906de 100644 --- a/guides/release/getting-started/quick-start.md +++ b/guides/release/getting-started/quick-start.md @@ -11,15 +11,17 @@ We'll cover these steps: 5. Building your app to be deployed to production. 6. Deploying your app to Netlify. -## Install Ember +## Install ember-cli -You can install Ember with a single command using [npm](https://docs.npmjs.com/cli), +You can install `ember-cli` globally with a single command using [npm](https://docs.npmjs.com/cli), Type this into your terminal: ```bash npm install -g ember-cli ``` +This will make the `ember` script available everywhere on your computer. If you prefer not to install `ember-cli` globally you can run whenever you need to using `npx ember-cli`. Most places in this guide assume that you have installed `ember-cli` globally so if you ever see a command like `ember new` remember that you can always run `npx ember-cli new` instead. + Don't have npm? [Learn how to install Node.js and npm here](https://docs.npmjs.com/getting-started/installing-node). For a full list of dependencies necessary for an Ember CLI project, visit the [Ember CLI Guides - Installing](https://cli.emberjs.com/release/basic-use/). @@ -57,11 +59,13 @@ After a few seconds, you should see output that looks like this: ```shell > ember-quickstart@0.0.0 start -> ember serve +> vite -building... + VITE v6.3.6 ready in 1202 ms -Build successful (9761ms) – Serving on http://localhost:4200/ + ➜ Local: http://localhost:4200/ + ➜ Network: use --host to expose + ➜ press h + enter to show help ``` (To stop the server at any time, type Ctrl-C in your terminal.) @@ -97,7 +101,7 @@ In your editor, open `app/templates/application.gjs` and change it to the follow ``` -Ember detects the changed file and automatically reloads the page for you in the background. +Vite detects the changed file and automatically reloads the page for you in the background. You should see that the welcome page has been replaced by "PeopleTracker". You also added an `{{outlet}}` to this page, which means that any route will be rendered in that place. @@ -413,22 +417,18 @@ it's time to get it ready to deploy to our users. To do so, run the following command: ```bash -ember build --environment=production +npm run build ``` -The `build` command packages up all of the assets that make up your +The `scripts.build` script in your `package.json` runs `vite build`, which packages up all of the assets that make up your application—JavaScript, templates, CSS, web fonts, images, and more. -In this case, we told Ember to build for the production environment via the `--environment` flag. +In this case, we told Vite to build for the production environment because running `vite build` without specifying a `--mode` defaults to `--mode production`. This creates an optimized bundle that's ready to upload to your web host. Once the build finishes, you'll find all of the concatenated and minified assets in your application's `dist/` directory. -The Ember community values collaboration and building common tools that everyone relies on. -If you're interested in deploying your app to production in a fast and reliable way, -check out the [Ember CLI Deploy](http://ember-cli-deploy.com/) addon. - If you deploy your application to an Apache web server, first create a new virtual host for the application. To make sure all routes are handled by `index.html`, add the following directive to the application's virtual host configuration: @@ -477,7 +477,7 @@ Now you are ready to deploy your app to production on Netlify platform. There ar You may need to re-create your `dist` directory to include changes made to `_redirects` file by running this command ```bash -ember build --environment=production +npm run build ``` Once you are logged-in to your Netlify account and in the "Sites" section, you should see the Netlify drag and drop area diff --git a/guides/release/pages.yml b/guides/release/pages.yml index 6b27cd59bf..ba23e0280d 100644 --- a/guides/release/pages.yml +++ b/guides/release/pages.yml @@ -298,6 +298,13 @@ - title: "Developer Tools" url: "toc-heading_developer-tools" is_heading: true +- title: "Build Tooling" + url: "build-tools" + pages: + - title: "Introduction" + url: "index" + - title: "Vite" + url: "vite" - title: "Ember Inspector" url: "ember-inspector" pages: diff --git a/guides/release/testing/index.md b/guides/release/testing/index.md index e760c420d9..bd0dee7747 100644 --- a/guides/release/testing/index.md +++ b/guides/release/testing/index.md @@ -14,46 +14,20 @@ Writing tests is also a fun activity, a nice change of pace from delivering feat You have a few options for running tests. -First, you can run the test suite by entering the command `ember test`, or `ember t`, in your terminal. This will run the suite just once. +First, you can run the test suite by entering the command `npm test` in your terminal. This will run the suite just once using the test command that is specified in your `package.json` `scripts.test` entry. Running a local development server (through `npm start`), you can visit the `/tests` URI. This will render the `tests/index.html` template. This will also auto-update as you are changing files in your app. ```bash # Run all tests once -ember test -ember t +npm test ``` ### How to Filter Tests -When you are working on a single component or page, you will want only a small subset of tests to run after every file change. To specify which tests to run, you can add `--module` or `--filter` option to your command. +When you start your development server and navigate to `/tests` you will be presented with the QUnit interface. At the top of that page you will see a `Filter` input that you can use to run a smaller subset of your tests. -The `--module` option allows you to select a **module**—a group of tests that you specified in `module()` in QUnit. - -```bash -# Button component example -ember test --module="Integration | Component | simple-button" - -# Run tests for a location service -ember t -m="Unit | Service | location" -``` - -The `--filter` option is more versatile. You can provide a phrase to match against the modules and test descriptions. A test description is what appears in `test()` in QUnit. - -```bash -# Button component example -ember test --filter="should show icon and label" - -# Test everything related to your dashboard -ember t -f="Dashboard" - -# Run integration tests -ember t -f="Integration" -``` - -In QUnit, you can exclude tests by adding an exclamation point to the beginning of the filter, e.g. `ember test --filter="!Acceptance"`. - -To learn more about options for testing, you can visit [Ember CLI Documentation](https://ember-cli.com/testing) or type `ember help test` in the command line. +You can also click the `Rerun` link beside any of the tests listed in QUnit interface to just rerun that one test. This is especially useful if you are working on a single component and want to run the corresponding unit or integration tests while you develop that component. ## How to Debug Tests diff --git a/guides/release/testing/testing-application.md b/guides/release/testing/testing-application.md index 0c3371c0fe..b563937202 100644 --- a/guides/release/testing/testing-application.md +++ b/guides/release/testing/testing-application.md @@ -24,8 +24,9 @@ module('Acceptance | login', function(hooks) { `module` allows you to scope your tests: Any test setup that is done inside of this scope will apply to all test cases contained in this module. -Scoping your tests with `module` also allows you to execute your tests independently from other tests. -For example, to only run your tests from your `login` module, run `ember test --module='Acceptance | login'`. + +Scoping your tests with `module` also allows you to execute your tests separately from other tests. The QUnit interface shows you a dropdown once you are running your tests that allows you to pick from available modules and filter tests down to the set that you have selected. + `setupApplicationTest` deals with application setup and teardown. The `test` function contains an example test. diff --git a/guides/release/tutorial/part-1/automated-testing.md b/guides/release/tutorial/part-1/automated-testing.md index f27173bcd8..02867f52c4 100644 --- a/guides/release/tutorial/part-1/automated-testing.md +++ b/guides/release/tutorial/part-1/automated-testing.md @@ -115,7 +115,7 @@ Finally, we asserted that clicking on the link should bring us to the `/about` U -We can put our automated test into motion by running the _test server_ using the `ember test --server` command, or `ember t -s` for short. This server behaves much like the development server, but it is explicitly running for our tests. It may automatically open a browser window and take you to the test UI, or you can open `http://localhost:7357/` yourself. +We can put our automated test into motion by running the development server using the `npm start` command and navigating to `http://localhost:4200/tests` in your browser. If you watch really carefully, you can see our test robot roaming around our app and clicking links: diff --git a/guides/release/tutorial/part-1/building-pages.md b/guides/release/tutorial/part-1/building-pages.md index e0d9ea1c73..1536cf79b0 100644 --- a/guides/release/tutorial/part-1/building-pages.md +++ b/guides/release/tutorial/part-1/building-pages.md @@ -25,7 +25,7 @@ This time, we would like the page to be served on the `/about` URL. In order to The place to manage what pages are available is the _router_. Go ahead and open `app/router.js` and make the following change: ```js { data-filename="app/router.js" data-diff="-9,+10,+11,+12" } -import EmberRouter from '@ember/routing/router'; +import EmberRouter from '@embroider/router'; import config from 'super-rentals/config/environment'; export default class Router extends EmberRouter { @@ -72,7 +72,7 @@ We're on a roll! While we're at it, let's add our third page. This time, things We want to keep the existing URLs for the new website, but we don't want to have to type `getting-in-touch` all over the new codebase! Fortunately, we can have the best of both worlds: ```js { data-filename="app/router.js" data-diff="+11" } -import EmberRouter from '@ember/routing/router'; +import EmberRouter from '@embroider/router'; import config from 'super-rentals/config/environment'; export default class Router extends EmberRouter { diff --git a/guides/release/tutorial/part-1/orientation.md b/guides/release/tutorial/part-1/orientation.md index 10510fa219..38d57f455f 100644 --- a/guides/release/tutorial/part-1/orientation.md +++ b/guides/release/tutorial/part-1/orientation.md @@ -24,7 +24,7 @@ To verify that your installation was successful, run: ```shell $ ember --version -ember-cli: 6.7.0 +ember-cli: 6.8.0 node: 18.20.8 os: linux x64 ``` @@ -37,27 +37,27 @@ We can create a new project using Ember CLI's `new` command. It follows the patt ```shell $ ember new super-rentals --lang en --strict -installing classic-build-app-blueprint -@ember-tooling/classic-build-app-blueprint v6.7.0 - +installing app-blueprint Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals: create .editorconfig create .ember-cli + create .env.development create .github/workflows/ci.yml create .prettierignore - create .prettierrc.js + create .prettierrc.mjs create .stylelintignore - create .stylelintrc.js - create .template-lintrc.js + create .stylelintrc.cjs + create .template-lintrc.mjs create .watchmanconfig create README.md + create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/babel.config.cjs create /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals/eslint.config.mjs create app/app.js create app/components/.gitkeep + create app/config/environment.js create app/controllers/.gitkeep create app/deprecation-workflow.js create app/helpers/.gitkeep - create app/index.html create app/models/.gitkeep create app/router.js create app/routes/.gitkeep @@ -69,14 +69,16 @@ Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-renta create config/targets.js create ember-cli-build.js create .gitignore + create index.html create package.json create public/robots.txt - create testem.js + create testem.cjs create tests/helpers/index.js create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep + create vite.config.mjs Installing packages... This might take a couple of minutes. npm: Installing dependencies ... @@ -110,6 +112,8 @@ super-rentals ├── app │ ├── components │ │ └── .gitkeep +│ ├── config +│ │ └── environment.js │ ├── controllers │ │ └── .gitkeep │ ├── helpers @@ -124,7 +128,6 @@ super-rentals │ │ └── application.gjs │ ├── app.js │ ├── deprecation-workflow.js -│ ├── index.html │ └── router.js ├── config │ ├── ember-cli-update.json @@ -144,22 +147,25 @@ super-rentals │ └── test-helper.js ├── .editorconfig ├── .ember-cli -├── .eslintcache +├── .env.development ├── .gitignore ├── .prettierignore -├── .prettierrc.js +├── .prettierrc.mjs ├── .stylelintignore -├── .stylelintrc.js -├── .template-lintrc.js +├── .stylelintrc.cjs +├── .template-lintrc.mjs ├── .watchmanconfig ├── README.md +├── babel.config.cjs ├── ember-cli-build.js ├── eslint.config.mjs +├── index.html ├── package.json ├── package-lock.json -└── testem.js +├── testem.cjs +└── vite.config.mjs -17 directories, 37 files +27 directories, 56 files ``` We'll learn about the purposes of these files and folders as we go. For now, just know that we'll spend most of our time working within the `app` folder. @@ -172,11 +178,26 @@ Ember CLI comes with a lot of different commands for a variety of development ta $ npm start > super-rentals@0.0.0 start -> ember serve +> vite + +Building + +Environment: development building... -Build successful (9761ms) – Serving on http://localhost:4200/ + +Build successful (9761ms) + +Slowest Nodes (totalTime >= 5%) | Total (avg) +-+- +Babel: @embroider/macros (1) | 436ms + + + + VITE v6.3.6 ready in 4143 ms + + ➜ Local: http://localhost:4200/ ``` The development server is responsible for compiling our app and serving it to the browsers. It may take a while to boot up. Once it's up and running, open your favorite browser and head to . You should see the following welcome page: @@ -204,8 +225,8 @@ The development server has a feature called _live reload_, which monitors your a As text on the welcome page pointed out, the source code for the page is located in `app/templates/application.gjs`. Let's try to edit that file and replace it with our own content: ```gjs { data-filename="app/templates/application.gjs" data-diff="-1,-2,-3,-5,-6,-7,-8,-9,-10,-11,+12" } -import pageTitle from 'ember-page-title/helpers/page-title'; -import WelcomePage from 'ember-welcome-page/components/welcome-page'; +import { pageTitle } from 'ember-page-title'; +import { WelcomePage } from 'ember-welcome-page';