paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases Wiki Activity

Add titles to codeblocks and switch from diff codeblock to language codeblock

Browse Source 
Signed-off-by: Paul Schultz <pschultz@pobox.com>
This commit is contained in:
Paul Schultz
2023-03-01 13:30:38 -06:00
parent adf9fe58f5
commit 9c95f91c0a
44 changed files with 2257 additions and 1869 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/tutorials/migrating-away-from-core.md
+7 -4
View File
@@ -38,10 +38,13 @@ across your project. This will automatically convert all module imports in your
source code to use one of the three new core packages instead. For example, the
following change might occur:
```diff
-import { useApi, configApiRef, InfoCard } from '@backstage/core';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { InfoCard } from '@backstage/core-components';
```ts
/* highlight-remove-next-line */
import { useApi, configApiRef, InfoCard } from '@backstage/core';
/* highlight-add-start */
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { InfoCard } from '@backstage/core-components';
/* highlight-add-end */
```
In a typical app created with `@backstage/create-app`, you would run the
docs/tutorials/react-router-stable-migration.md
+26 -20
View File
@@ -45,7 +45,7 @@ yarn backstage-cli migrate react-router-deps
For those interested in doing this manually, apply the below change to all `package.json` files except the one at `packages/app/package.json` or any other app packages. Skip moving any dependencies that don't already exist, and move both `dependencies` and `devDependencies`.
```diff
```diff title="package.json"
dependencies {
...
- "react-router-dom": "^6.0.0-beta.0",
@@ -64,13 +64,13 @@ It's important that you also update your external plugins to their latest versio
During this migration there may be external plugins that need updating. If you encounter any plugins outside of the `@backstage` scope that are incompatible with your installation, make sure to check for an existing issue or raise a new one at the plugin's GitHub repository.
### Step 4 - Bump the React Router dependencies in your app.
### Step 4 - Bump the React Router dependencies in your app
Now it's time to do the actual migration to the latest version of React Router. At this time of writing that is `6.3.0`, but that is of course a moving target.
The first step is to modify `packages/app/package.json`:
```diff
```diff title="package.json"
- "react-router": "6.0.0-beta.0",
- "react-router-dom": "6.0.0-beta.0",
+ "react-router": "^6.3.0",
@@ -81,7 +81,7 @@ In case you happen to have multiple app packages in your project, apply the same
Once the change has been made, run `yarn install`, and then `yarn why react-router` to validate the installation. You should see the following line in the log as the only resulting entry:
```
```bash
=> Found "react-router@6.3.0"
```
@@ -157,28 +157,34 @@ Because of the above change, the `PermissionedRoute` component no longer works i
It's crucial that you update to `RequirePermission` at the same time as you update to React Router v6 stable as the `PermissionedRoute` component will no longer function.
```diff
- <PermissionedRoute
- path="/catalog-import"
- permission={catalogEntityCreatePermission}
- element={<CatalogImportPage />}
+ <Route
+ path="/catalog-import"
+ element={
+ <RequirePermission permission={catalogEntityCreatePermission}>
+ <CatalogImportPage />
+ </RequirePermission>
+ }
/>
```tsx
{/* highlight-remove-start */}
<PermissionedRoute
path="/catalog-import"
permission={catalogEntityCreatePermission}
element={<CatalogImportPage />}
{/* highlight-remove-end */}
{/* highlight-add-start */}
<Route
path="/catalog-import"
element={
<RequirePermission permission={catalogEntityCreatePermission}>
<CatalogImportPage />
</RequirePermission>
}
{/* highlight-add-end */}
/>
```
### `<Navigate />` component
When migrating over to React Router v6 stable, you might also see browser console warnings for the `Navigate` component. This will need to be wrapped up in a `Route` component with the `Navigate` component in the `element` prop.
```diff
- <Navigate key="/" to="catalog" />
+ <Route path="/" element={<Navigate to="catalog" />} />
```tsx
{/* highlight-remove-next-line */}
<Navigate key="/" to="catalog" />
{/* highlight-add-next-line */}
<Route path="/" element={<Navigate to="catalog" />} />
```
### `NavLink`
docs/tutorials/switching-sqlite-postgres.md
+47 -39
View File
@@ -29,24 +29,28 @@ yarn add --cwd packages/backend pg
Next, modify `app-config.yaml` in the root folder to add PostgreSQL
configuration for the backend:
```diff
```yaml title="app-config.yaml"
backend:
database:
- client: better-sqlite3
- connection: ':memory:'
+ # config options: https://node-postgres.com/api/client
+ client: pg
+ connection:
+ host: ${POSTGRES_HOST}
+ port: ${POSTGRES_PORT}
+ user: ${POSTGRES_USER}
+ password: ${POSTGRES_PASSWORD}
+ # https://node-postgres.com/features/ssl
+ # you can set the sslmode configuration option via the `PGSSLMODE` environment variable
+ # see https://www.postgresql.org/docs/current/libpq-ssl.html Table 33.1. SSL Mode Descriptions (e.g. require)
+ # ssl:
+ # ca: # if you have a CA file and want to verify it you can uncomment this section
+ # $file: <file-path>/ca/server.crt
# highlight-remove-start
client: better-sqlite3
connection: ':memory:'
# highlight-remove-end
# highlight-add-start
# config options: https://node-postgres.com/api/client
client: pg
connection:
host: ${POSTGRES_HOST}
port: ${POSTGRES_PORT}
user: ${POSTGRES_USER}
password: ${POSTGRES_PASSWORD}
# https://node-postgres.com/features/ssl
# you can set the sslmode configuration option via the `PGSSLMODE` environment variable
# see https://www.postgresql.org/docs/current/libpq-ssl.html Table 33.1. SSL Mode Descriptions (e.g. require)
# ssl:
# ca: # if you have a CA file and want to verify it you can uncomment this section
# $file: <file-path>/ca/server.crt
# highlight-add-end
```
If you have an `app-config.local.yaml` for local development, a similar update
@@ -60,31 +64,35 @@ The Backstage App is now ready to start up with a PostgreSQL backing database.
If you want to override the default connection pool settings then use the below configuration:
```diff
```yaml title="app-config.local.yaml"
backend:
database:
- client: better-sqlite3
- connection: ':memory:'
+ # config options: https://node-postgres.com/api/client
+ client: pg
+ connection:
+ host: ${POSTGRES_HOST}
+ port: ${POSTGRES_PORT}
+ user: ${POSTGRES_USER}
+ password: ${POSTGRES_PASSWORD}
+ # https://node-postgres.com/features/ssl
+ # you can set the sslmode configuration option via the `PGSSLMODE` environment variable
+ # see https://www.postgresql.org/docs/current/libpq-ssl.html Table 33.1. SSL Mode Descriptions (e.g. require)
+ # ssl:
+ # ca: # if you have a CA file and want to verify it you can uncomment this section
+ # $file: <file-path>/ca/server.crt
+ # Refer to Tarn docs for default values on PostgreSQL pool configuration - https://github.com/Vincit/tarn.js
+ knexConfig:
+ pool:
+ min: 3
+ max: 12
+ acquireTimeoutMillis: 60000
+ idleTimeoutMillis: 60000
# highlight-remove-start
client: better-sqlite3
connection: ':memory:'
# highlight-remove-end
# highlight-add-start
# config options: https://node-postgres.com/api/client
client: pg
connection:
host: ${POSTGRES_HOST}
port: ${POSTGRES_PORT}
user: ${POSTGRES_USER}
password: ${POSTGRES_PASSWORD}
# https://node-postgres.com/features/ssl
# you can set the sslmode configuration option via the `PGSSLMODE` environment variable
# see https://www.postgresql.org/docs/current/libpq-ssl.html Table 33.1. SSL Mode Descriptions (e.g. require)
# ssl:
# ca: # if you have a CA file and want to verify it you can uncomment this section
# $file: <file-path>/ca/server.crt
# Refer to Tarn docs for default values on PostgreSQL pool configuration - https://github.com/Vincit/tarn.js
knexConfig:
pool:
min: 3
max: 12
acquireTimeoutMillis: 60000
idleTimeoutMillis: 60000
# highlight-add-end
```
### Using a single database
docs/tutorials/yarn-migration.md
+11 -6
View File
@@ -82,19 +82,24 @@ RUN yarn workspaces focus --all --production && rm -rf "$(yarn cache clean)"
Additionally, `yarn config` has been reworked from being able to store any arbitrary key-value pairs to only supporting a handful of predefined pairs. Previously, we would set our preferred `python3` interpreter to work around [any issues related to node-gyp](https://github.com/backstage/backstage/issues/11583) so we need to provide an appropriate substitute.
```diff
```Dockerfile
FROM node:16-bullseye-slim
+# Set Python interpreter for `node-gyp` to use
+ENV PYTHON /usr/bin/python3
# highlight-add-start
# Set Python interpreter for `node-gyp` to use
ENV PYTHON /usr/bin/python3
# highlight-add-end
# Install sqlite3 dependencies. You can skip this if you don't use sqlite3 in the image,
# in which case you should also move better-sqlite3 to "devDependencies" in package.json.
RUN apt-get update && \
apt-get install -y --no-install-recommends libsqlite3-dev python3 build-essential && \
- rm -rf /var/lib/apt/lists/* && \
- yarn config set python /usr/bin/python3
+ rm -rf /var/lib/apt/lists/*
# highlight-remove-start
rm -rf /var/lib/apt/lists/* && \
yarn config set python /usr/bin/python3
# highlight-remove-end
# highlight-add-next-line
rm -rf /var/lib/apt/lists/*
```
You'll want to make sure that the `PYTHON` environment variable is declared relatively early, before any instances of `Yarn` are invoked as `node-gyp` is indirectly triggered by some modules during installation.