diff --git a/.changeset/few-suns-cheer.md b/.changeset/few-suns-cheer.md new file mode 100644 index 0000000000..d6587c130a --- /dev/null +++ b/.changeset/few-suns-cheer.md @@ -0,0 +1,28 @@ +--- +'@backstage/create-app': patch +--- + +Adds "yarn dev" command to simplify local development. + +To add the command to an existing application, first add it to the `scripts` +section of your monorepo root `package.json` like so: + +```diff + "scripts": { ++ "dev": "concurrently \"yarn start\" \"yarn start-backend\"", + "start": "yarn workspace app start", + "start-backend": "yarn workspace backend start", +``` + +And then add the `concurrently` package to your monorepo, like so: + +```sh +yarn add concurrently@6.0.0 --dev -W +``` + +Notes: + +- This needs to be done to the monorepo root, not your frontend or backend package. +- The `--dev -W` will add it only to `devDependencies`, and force it to the monorepo main root. + +You can then run `yarn dev` which will start both the Backstage frontend and backend in a single window. diff --git a/docs/getting-started/create-an-app.md b/docs/getting-started/create-an-app.md index adc74b78d6..837a27e592 100644 --- a/docs/getting-started/create-an-app.md +++ b/docs/getting-started/create-an-app.md @@ -112,24 +112,20 @@ When the installation is complete you can open the app folder and start the app. ```bash cd my-backstage-app -yarn start +yarn dev ``` -_When `yarn start` is ready it should open up a browser window displaying your -app, if not you can navigate to `http://localhost:3000`._ - -In most cases you will want to start the backend as well, as it is required for -the catalog to work, along with many other plugins. - -To start the backend, open a separate terminal session and run the following in -the root directory: - -```bash -yarn workspace backend start -``` +The `yarn dev` command will run both the frontend and backend as separate +processes (named `[0]` and `[1]`) in the same window. When the command finishes +running, it should open up a browser window displaying your app. If not, you can +open a browser and directly navigate to the frontend at `http://localhost:3000`. Now you're free to hack away on your own Backstage installation! +As you get more experienced with the app, in future you can run just the +frontend with `yarn start` in one window, and the backend with +`yarn start-backend` in a different window. + ## Linking in local Backstage packages It can often be useful to try out changes to the packages in the main Backstage @@ -156,7 +152,7 @@ yarn install With this in place you can now modify the `@backstage/core` package within the main repo, and have those changes be reflected and tested in your app. Simply -run your app using `yarn start` as normal. +run your app using `yarn dev` (or `yarn start` for just frontend) as normal. Note that for backend packages you need to make sure that linked packages are not dependencies of any non-linked package. If you for example want to work on diff --git a/package.json b/package.json index 3a1ed1ed8d..fcabe5b3e5 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@spotify/eslint-config-oss": "^1.0.1", "@spotify/prettier-config": "^9.0.0", "command-exists": "^1.2.9", - "concurrently": "^5.2.0", + "concurrently": "^6.0.0", "fs-extra": "^9.0.0", "husky": "^4.2.3", "lerna": "^4.0.0", diff --git a/packages/create-app/templates/default-app/package.json.hbs b/packages/create-app/templates/default-app/package.json.hbs index 58fb20ba05..d7f7fbafaf 100644 --- a/packages/create-app/templates/default-app/package.json.hbs +++ b/packages/create-app/templates/default-app/package.json.hbs @@ -6,6 +6,7 @@ "node": "12 || 14" }, "scripts": { + "dev": "concurrently \"yarn start\" \"yarn start-backend\"", "start": "yarn workspace app start", "start-backend": "yarn workspace backend start", "build": "lerna run build", @@ -30,6 +31,7 @@ "devDependencies": { "@backstage/cli": "^{{version '@backstage/cli'}}", "@spotify/prettier-config": "^7.0.0", + "concurrently": "^6.0.0", "lerna": "^4.0.0", "prettier": "^1.19.1" }, diff --git a/yarn.lock b/yarn.lock index 58c17d2262..82c2554b3c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10230,20 +10230,20 @@ concat-with-sourcemaps@^1.1.0: dependencies: source-map "^0.6.1" -concurrently@^5.2.0: - version "5.3.0" - resolved "https://registry.npmjs.org/concurrently/-/concurrently-5.3.0.tgz#7500de6410d043c912b2da27de3202cb489b1e7b" - integrity sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ== +concurrently@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/concurrently/-/concurrently-6.0.0.tgz#c1a876dd99390979c71f8c6fe6796882f3a13199" + integrity sha512-Ik9Igqnef2ONLjN2o/OVx1Ow5tymVvvEwQeYCQdD/oV+CN9oWhxLk7ibcBdOtv0UzBqHCEKRwbKceYoTK8t3fQ== dependencies: - chalk "^2.4.2" - date-fns "^2.0.1" - lodash "^4.17.15" - read-pkg "^4.0.1" - rxjs "^6.5.2" + chalk "^4.1.0" + date-fns "^2.16.1" + lodash "^4.17.20" + read-pkg "^5.2.0" + rxjs "^6.6.3" spawn-command "^0.0.2-1" - supports-color "^6.1.0" + supports-color "^8.1.0" tree-kill "^1.2.2" - yargs "^13.3.0" + yargs "^16.2.0" config-chain@^1.1.12: version "1.1.12" @@ -11281,7 +11281,7 @@ date-fns@^1.27.2: resolved "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== -date-fns@^2.0.0-alpha.27, date-fns@^2.0.1, date-fns@^2.16.1: +date-fns@^2.0.0-alpha.27, date-fns@^2.16.1: version "2.18.0" resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.18.0.tgz#08e50aee300ad0d2c5e054e3f0d10d8f9cdfe09e" integrity sha512-NYyAg4wRmGVU4miKq5ivRACOODdZRY3q5WLmOJSq8djyzftYphU7dTHLcEtLqEvfqMKQ0jVv91P4BAwIjsXIcw== @@ -22301,15 +22301,6 @@ read-pkg@^3.0.0: normalize-package-data "^2.3.2" path-type "^3.0.0" -read-pkg@^4.0.1: - version "4.0.1" - resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237" - integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc= - dependencies: - normalize-package-data "^2.3.2" - parse-json "^4.0.0" - pify "^3.0.0" - read-pkg@^5.2.0: version "5.2.0" resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc" @@ -23101,7 +23092,7 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.2, rxjs@^6.5.3, rxjs@^6.5.5, rxjs@^6.6.0: +rxjs@^6.3.3, rxjs@^6.4.0, rxjs@^6.5.3, rxjs@^6.5.5, rxjs@^6.6.0: version "6.6.2" resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz#8096a7ac03f2cc4fe5860ef6e572810d9e01c0d2" integrity sha512-BHdBMVoWC2sL26w//BCu3YzKT4s2jip/WhwsGEDmeKYBhKDZeYezVUnHatYB7L85v5xs0BAQmg6BEYJEKxBabg== @@ -24501,6 +24492,13 @@ supports-color@^7.0.0, supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +supports-color@^8.1.0: + version "8.1.1" + resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c" + integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q== + dependencies: + has-flag "^4.0.0" + supports-hyperlinks@^2.0.0: version "2.1.0" resolved "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47" @@ -26768,7 +26766,7 @@ yargs-parser@^3.2.0: camelcase "^3.0.0" lodash.assign "^4.1.0" -yargs@^13.3.0, yargs@^13.3.2: +yargs@^13.3.2: version "13.3.2" resolved "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd" integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==