diff --git a/.local.dic b/.local.dic index 1e1a743530..542737863b 100644 --- a/.local.dic +++ b/.local.dic @@ -130,6 +130,7 @@ linters lookups LSP Mapbox +TomTom MDN metaprogramming misspelt 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';