From 675a854205c05576eb34b85f813577d6bd1106f0 Mon Sep 17 00:00:00 2001 From: Leo McArdle Date: Tue, 6 Jun 2023 15:07:23 +0100 Subject: [PATCH] feat(client/env): split CRUD_MODE into WRITER_MODE and DEV_MODE (#8383) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently we place a lot of “local environment” features/setup behind the CRUD_MODE environment variable. There's some problems with that: - It enables a bunch of writer-specific features we really don't need as devs, such as index.json reloading every few seconds, and the flaws toolbar - It isn't enabled on :5042, so testing certain features (such as glean) aren't possible on that port, as they require further setup locally which isn't done when CRUD_MODE is false --- .env-dist | 2 + .github/workflows/developing.yml | 1 + .github/workflows/npm-publish.yml | 2 +- .../workflows/npm-published-simulation.yml | 2 +- client/src/app.tsx | 12 +++--- client/src/banners/README.md | 2 +- client/src/banners/index.tsx | 4 +- client/src/blog/index.tsx | 4 +- client/src/blog/post.tsx | 4 +- client/src/contributor-spotlight/index.tsx | 4 +- client/src/document/index.tsx | 8 ++-- client/src/document/toolbar/edit-actions.tsx | 4 +- client/src/document/toolbar/flaws.tsx | 8 ++-- client/src/document/toolbar/index.tsx | 4 +- client/src/env.ts | 37 +++++++++++++++---- .../homepage/contributor-spotlight/index.tsx | 4 +- .../src/homepage/featured-articles/index.tsx | 4 +- client/src/homepage/latest-news/index.tsx | 4 +- .../homepage/recent-contributions/index.tsx | 4 +- client/src/homepage/static-page/index.tsx | 4 +- .../plus/offer-overview/offer-hero/index.tsx | 4 +- client/src/site-search/search-results.tsx | 6 +-- client/src/sitemap/index.tsx | 8 ++-- client/src/telemetry/glean-context.tsx | 6 +-- docs/envvars.md | 27 ++++++++------ docs/npm-packaging.md | 2 +- scripts/developing.sh | 1 + testing/README.md | 2 +- 28 files changed, 101 insertions(+), 73 deletions(-) diff --git a/.env-dist b/.env-dist index 5719809fc5a3..fde17baddea9 100644 --- a/.env-dist +++ b/.env-dist @@ -2,5 +2,7 @@ CONTENT_ROOT=../content/files #CONTENT_TRANSLATED_ROOT=../translated-content/files #CONTRIBUTOR_SPOTLIGHT_ROOT=../mdn-contributor-spotlight/contributors +REACT_APP_DEV_MODE=true + # See documentation in docs/envvars.md for more information about this #BUILD_FLAW_LEVELS=broken_links:error, macros:ignore diff --git a/.github/workflows/developing.yml b/.github/workflows/developing.yml index 620a1adb2213..fc1364c9f480 100644 --- a/.github/workflows/developing.yml +++ b/.github/workflows/developing.yml @@ -37,6 +37,7 @@ jobs: - name: Start the dev server env: + REACT_APP_WRITER_MODE: true # Remember, the mdn/content repo got cloned into `pwd` into a # sub-folder called "mdn/content" CONTENT_ROOT: "${{ github.workspace }}/mdn/content/files" diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 746c2bba9356..a6f2cb19021c 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -46,7 +46,7 @@ jobs: env: # What this does is it makes sure the built client is made for # doing CRUD work (e.g. previewing, toolbar, flaws UI, etc) - REACT_APP_CRUD_MODE: true + REACT_APP_WRITER_MODE: true # This makes sure the auth is disabled. I.e. the "Sign in" link # in the header. It also disables any XHR checks to the server's diff --git a/.github/workflows/npm-published-simulation.yml b/.github/workflows/npm-published-simulation.yml index dc93cceef8f8..f1c8da23bd73 100644 --- a/.github/workflows/npm-published-simulation.yml +++ b/.github/workflows/npm-published-simulation.yml @@ -45,7 +45,7 @@ jobs: # The following env vars is what we do in npm-publish.yml # Each variable set is documented there. - REACT_APP_CRUD_MODE: true + REACT_APP_WRITER_MODE: true REACT_APP_DISABLE_AUTH: true CONTENT_ROOT: testing/content/files run: | diff --git a/client/src/app.tsx b/client/src/app.tsx index 6b09297ef732..5b9754cb278c 100644 --- a/client/src/app.tsx +++ b/client/src/app.tsx @@ -5,7 +5,7 @@ import { Routes, Route, useLocation, useMatch } from "react-router-dom"; // and applied before any component specific style import "./app.scss"; -import { CRUD_MODE, PLACEMENT_ENABLED, PLUS_IS_ENABLED } from "./env"; +import { WRITER_MODE, PLACEMENT_ENABLED, PLUS_IS_ENABLED } from "./env"; import { Homepage } from "./homepage"; import { Document } from "./document"; import { A11yNav } from "./ui/molecules/a11y-nav"; @@ -133,11 +133,11 @@ export function App(appProps: HydrationData) { const isServer = useIsServer(); - // When preparing a build for use in the NPM package, CRUD_MODE is always true. + // When preparing a build for use in the NPM package, WRITER_MODE is always true. // But if the App is loaded from the code that builds the SPAs, then `isServer` - // is true. So you have to have `isServer && CRUD_MODE` at the same time. + // is true. So you have to have `isServer && WRITER_MODE` at the same time. const homePage = - !isServer && CRUD_MODE ? ( + !isServer && WRITER_MODE ? ( @@ -170,7 +170,7 @@ export function App(appProps: HydrationData) { path="/:locale/*" element={ - {CRUD_MODE && ( + {WRITER_MODE && ( <> component itself. - Normally, you get to the home page by NOT being in CRUD_MODE, but + Normally, you get to the home page by NOT being in WRITER_MODE, but if you want to use the hot-reloading app, it might be convenient to be able to run it locally */} diff --git a/client/src/banners/README.md b/client/src/banners/README.md index b1894198145a..3adf17335693 100644 --- a/client/src/banners/README.md +++ b/client/src/banners/README.md @@ -22,7 +22,7 @@ To adjust the number of days to embargo the banner, update `daysToEmbargo`: const daysToEmbargo = 14; ``` -> NOTE: Banners are not embargoed, if `REACT_APP_CRUD_MODE` is set to `true`. +> NOTE: Banners are not embargoed, if `REACT_APP_DEV_MODE` is set to `true`. Now head over to `client/src/banners/active-banner.tsx` and add or update the the component function for the banner as appropriate: diff --git a/client/src/banners/index.tsx b/client/src/banners/index.tsx index c6ef2694ed73..1c6c5fee0856 100644 --- a/client/src/banners/index.tsx +++ b/client/src/banners/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { setEmbargoed, isEmbargoed } from "./banner-utils"; -import { CRUD_MODE, NEWSLETTER_ENABLED } from "../env"; +import { DEV_MODE, NEWSLETTER_ENABLED } from "../env"; // We may or may not load any active banner. But if there's a small chance // that we might, it's best practice to not have to lazy-load the CSS @@ -24,7 +24,7 @@ export function Banner() { ? BannerId.NEWSLETTER_ANNOUNCEMENT : BannerId.MULTIPLE_COLLECTIONS : null; - if (currentBannerId && (CRUD_MODE || !isEmbargoed(currentBannerId))) { + if (currentBannerId && (DEV_MODE || !isEmbargoed(currentBannerId))) { return ( ) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: WRITER_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx index 1c55e45c23f2..6440815d3579 100644 --- a/client/src/document/index.tsx +++ b/client/src/document/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useSearchParams, useNavigate } from "react-router-dom"; import useSWR, { mutate } from "swr"; -import { CRUD_MODE, PLACEMENT_ENABLED } from "../env"; +import { WRITER_MODE, PLACEMENT_ENABLED } from "../env"; import { useGA } from "../ga-context"; import { useIsServer, useLocale } from "../hooks"; @@ -109,9 +109,9 @@ export function Document(props /* TODO: define a TS interface for this */) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: WRITER_MODE, revalidateOnMount: !fallbackData, - refreshInterval: CRUD_MODE ? 500 : 0, + refreshInterval: WRITER_MODE ? 500 : 0, } ); @@ -235,7 +235,7 @@ export function Document(props /* TODO: define a TS interface for this */) { - {!isServer && CRUD_MODE && !props.isPreview && doc.isActive && ( + {!isServer && WRITER_MODE && !props.isPreview && doc.isActive && ( }> diff --git a/client/src/document/toolbar/flaws.tsx b/client/src/document/toolbar/flaws.tsx index 70ffa5fd6aee..eaf3ab936233 100644 --- a/client/src/document/toolbar/flaws.tsx +++ b/client/src/document/toolbar/flaws.tsx @@ -4,7 +4,7 @@ import { annotate, annotationGroup } from "rough-notation"; import { RoughAnnotation } from "rough-notation/lib/model"; import { diffWords } from "diff"; -import { CRUD_MODE, CRUD_MODE_HOSTNAMES } from "../../env"; +import { WRITER_MODE, WRITER_MODE_HOSTNAMES } from "../../env"; import { humanizeFlawName } from "../../flaw-utils"; import { useDocumentURL } from "../hooks"; import { @@ -205,8 +205,8 @@ function Flaws({ flaws: FlawCount[]; reloadPage: () => void; }) { - if (!CRUD_MODE) { - throw new Error("This shouldn't be used in non-development builds"); + if (!WRITER_MODE) { + throw new Error("This shouldn't be used without WRITER_MODE=true"); } const fixableFlaws = Object.values(doc.flaws) @@ -217,7 +217,7 @@ function Flaws({ }) .flat(); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); // Note! This will work on Windows. The filename can be sent to // the server in POSIX style and the `open-editor` program will make diff --git a/client/src/document/toolbar/index.tsx b/client/src/document/toolbar/index.tsx index d20f6abcd677..63db6ef8375f 100644 --- a/client/src/document/toolbar/index.tsx +++ b/client/src/document/toolbar/index.tsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { CRUD_MODE_HOSTNAMES } from "../../env"; +import { WRITER_MODE_HOSTNAMES } from "../../env"; import { Doc } from "../../../../libs/types/document"; import { EditActions } from "./edit-actions"; import { ToggleDocumentFlaws } from "./flaws"; @@ -40,7 +40,7 @@ export default function Toolbar({ } }, [doc]); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); return (
diff --git a/client/src/env.ts b/client/src/env.ts index 6f99233b69a2..a1b9b35211f3 100644 --- a/client/src/env.ts +++ b/client/src/env.ts @@ -8,21 +8,42 @@ export const DISABLE_AUTH = Boolean( JSON.parse(process.env.REACT_APP_DISABLE_AUTH || "false") ); -export const CRUD_MODE = Boolean( - JSON.parse( - process.env.REACT_APP_CRUD_MODE || - JSON.stringify(process.env.NODE_ENV === "development") - ) -); +/** Deprecated, don't export, use WRITER_MODE and/or DEV_MODE instead. */ +const CRUD_MODE = + process.env.REACT_APP_WRITER_MODE || process.env.REACT_APP_DEV_MODE + ? false + : Boolean( + JSON.parse( + process.env.REACT_APP_CRUD_MODE || + JSON.stringify(process.env.NODE_ENV === "development") + ) + ); + +if (process.env.REACT_APP_CRUD_MODE) { + console.warn( + "Warning: REACT_APP_CRUD_MODE is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." + ); +} else if (process.env.NODE_ENV === "development" && CRUD_MODE) { + console.warn( + "Warning: setting REACT_APP_CRUD_MODE with NODE_ENV=development is deprecated, set REACT_APP_WRITER_MODE and/or REACT_APP_DEV_MODE instead." + ); +} + +export const WRITER_MODE = + CRUD_MODE || + Boolean(JSON.parse(process.env.REACT_APP_WRITER_MODE || "false")); -export const CRUD_MODE_HOSTNAMES = ( - process.env.REACT_APP_CRUD_MODE_HOSTNAMES || +export const WRITER_MODE_HOSTNAMES = ( + process.env.REACT_APP_WRITER_MODE_HOSTNAMES || "localhost,localhost.org,127.0.0.1" ) .split(",") .map((x) => x.trim()) .filter(Boolean); +export const DEV_MODE = + CRUD_MODE || Boolean(JSON.parse(process.env.REACT_APP_DEV_MODE || "false")); + export const KUMA_HOST = process.env.REACT_APP_KUMA_HOST || "developer.mozilla.org"; diff --git a/client/src/homepage/contributor-spotlight/index.tsx b/client/src/homepage/contributor-spotlight/index.tsx index 84aa2fc12100..827f1d5ea594 100644 --- a/client/src/homepage/contributor-spotlight/index.tsx +++ b/client/src/homepage/contributor-spotlight/index.tsx @@ -1,5 +1,5 @@ import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; import { Icon } from "../../ui/atoms/icon"; import Mandala from "../../ui/molecules/mandala"; @@ -24,7 +24,7 @@ export function ContributorSpotlight(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/featured-articles/index.tsx b/client/src/homepage/featured-articles/index.tsx index 19c785f6a2f2..5a1c8b84300d 100644 --- a/client/src/homepage/featured-articles/index.tsx +++ b/client/src/homepage/featured-articles/index.tsx @@ -1,5 +1,5 @@ import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; import "./index.scss"; @@ -18,7 +18,7 @@ export default function FeaturedArticles(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/latest-news/index.tsx b/client/src/homepage/latest-news/index.tsx index 8d2affa34e9d..5e71e7a68dea 100644 --- a/client/src/homepage/latest-news/index.tsx +++ b/client/src/homepage/latest-news/index.tsx @@ -1,7 +1,7 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; import { NewsItem } from "../../../../libs/types/document"; @@ -24,7 +24,7 @@ export function LatestNews(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/recent-contributions/index.tsx b/client/src/homepage/recent-contributions/index.tsx index f4b91f31d79a..af398519aeb9 100644 --- a/client/src/homepage/recent-contributions/index.tsx +++ b/client/src/homepage/recent-contributions/index.tsx @@ -1,7 +1,7 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { HydrationData } from "../../../../libs/types/hydration"; import "./index.scss"; @@ -23,7 +23,7 @@ function RecentContributions(props: HydrationData) { }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/homepage/static-page/index.tsx b/client/src/homepage/static-page/index.tsx index 3f1e54924839..68970eaafce2 100644 --- a/client/src/homepage/static-page/index.tsx +++ b/client/src/homepage/static-page/index.tsx @@ -1,6 +1,6 @@ import React, { ReactElement } from "react"; import useSWR from "swr"; -import { CRUD_MODE } from "../../env"; +import { DEV_MODE } from "../../env"; import { SidebarContainer } from "../../document/organisms/sidebar"; import { TOC } from "../../document/organisms/toc"; import { Toc } from "../../../../libs/types/document"; @@ -45,7 +45,7 @@ function StaticPage({ }, { fallbackData, - revalidateOnFocus: CRUD_MODE, + revalidateOnFocus: DEV_MODE, revalidateOnMount: !fallbackData, } ); diff --git a/client/src/plus/offer-overview/offer-hero/index.tsx b/client/src/plus/offer-overview/offer-hero/index.tsx index 7ecf67f3845c..65fdbab16598 100644 --- a/client/src/plus/offer-overview/offer-hero/index.tsx +++ b/client/src/plus/offer-overview/offer-hero/index.tsx @@ -1,9 +1,9 @@ -import { CRUD_MODE } from "../../../env"; +import { DEV_MODE } from "../../../env"; import Mandala from "../../../ui/molecules/mandala"; import "./index.scss"; function OfferHero() { - const animate = !CRUD_MODE; + const animate = !DEV_MODE; return (
diff --git a/client/src/site-search/search-results.tsx b/client/src/site-search/search-results.tsx index 31e2e382c69f..e13b466f342a 100644 --- a/client/src/site-search/search-results.tsx +++ b/client/src/site-search/search-results.tsx @@ -3,7 +3,7 @@ import { createSearchParams, Link, useSearchParams } from "react-router-dom"; import useSWR from "swr"; import { Loading } from "../ui/atoms/loading"; -import { CRUD_MODE, KUMA_HOST } from "../env"; +import { WRITER_MODE, KUMA_HOST } from "../env"; import { useLocale } from "../hooks"; import { appendURL } from "./utils"; import { Button } from "../ui/atoms/button"; @@ -195,8 +195,8 @@ export default function SearchResults() { } function RemoteSearchWarning() { - if (CRUD_MODE) { - // If you're in CRUD_MODE, the search results will be proxied from a remote + if (WRITER_MODE) { + // If you're in WRITER_MODE, the search results will be proxied from a remote // Kuma and it might be confusing if a writer is wondering why their // actively worked-on content isn't showing up in searches. // The default value in the server is not accessible from the react app, diff --git a/client/src/sitemap/index.tsx b/client/src/sitemap/index.tsx index 9b2217c241b6..ed938a5138d2 100644 --- a/client/src/sitemap/index.tsx +++ b/client/src/sitemap/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Link, useNavigate, useLocation } from "react-router-dom"; import useSWR from "swr"; -import { CRUD_MODE, CRUD_MODE_HOSTNAMES } from "../env"; +import { WRITER_MODE, WRITER_MODE_HOSTNAMES } from "../env"; import { useLocale } from "../hooks"; import { Loading } from "../ui/atoms/loading"; import { MainContentContainer } from "../ui/atoms/page-content"; @@ -399,7 +399,7 @@ function Breadcrumb({ const root = pathname.split("/").slice(0, 2); root.push("_sitemap"); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); return ( <> @@ -429,7 +429,7 @@ function Breadcrumb({ {thisDoc.title} {" "} - {CRUD_MODE && !isReadOnly && ( + {WRITER_MODE && !isReadOnly && ( ( void; }) { const locale = useLocale(); - const isReadOnly = !CRUD_MODE_HOSTNAMES.includes(window.location.hostname); + const isReadOnly = !WRITER_MODE_HOSTNAMES.includes(window.location.hostname); return (
    diff --git a/client/src/telemetry/glean-context.tsx b/client/src/telemetry/glean-context.tsx index 1973e81955ea..edec3b895349 100644 --- a/client/src/telemetry/glean-context.tsx +++ b/client/src/telemetry/glean-context.tsx @@ -4,7 +4,7 @@ import * as navigatorMetric from "./generated/navigator"; import * as elementMetric from "./generated/element"; import * as pings from "./generated/pings"; import Glean from "@mozilla/glean/web"; -import { CRUD_MODE, GLEAN_CHANNEL, GLEAN_DEBUG, GLEAN_ENABLED } from "../env"; +import { DEV_MODE, GLEAN_CHANNEL, GLEAN_DEBUG, GLEAN_ENABLED } from "../env"; import { useEffect, useRef } from "react"; import { useLocation } from "react-router"; import { useUserData } from "../user-context"; @@ -61,12 +61,12 @@ function glean(): GleanAnalytics { Glean.initialize(GLEAN_APP_ID, uploadEnabled, { maxEvents: 1, channel: GLEAN_CHANNEL, - serverEndpoint: CRUD_MODE + serverEndpoint: DEV_MODE ? "https://developer.allizom.org" : document.location.origin, }); - if (CRUD_MODE) { + if (DEV_MODE) { Glean.setDebugViewTag("mdn-dev"); } Glean.setLogPings(GLEAN_DEBUG); diff --git a/docs/envvars.md b/docs/envvars.md index 2306ef4d13ac..58de15b63664 100644 --- a/docs/envvars.md +++ b/docs/envvars.md @@ -254,26 +254,29 @@ name instead. That means you can log in _from_ Yari with a single click. This removes sign-in and `whoami` XHR fetching. Useful when using Yari purely for content editing as authentication is then not required. -### `REACT_APP_CRUD_MODE` +### `REACT_APP_DEV_MODE` -**Default: `NODE_ENV==='development'`** +**Default: `false`** + +Enables features or setup which only make sense in local development. + +### `REACT_APP_WRITER_MODE` + +**Default: `false`** Basically, these are the optional, lazy-loaded features of the app that only make sense when you're working on authoring the content. For example the Toolbar bar appears based on this. -It defaults to `NODE_ENV==='development'` if not set which means that it's -enable by default when doing development with the `localhost:3000` dev server. - -### `REACT_APP_CRUD_MODE_HOSTNAMES` +### `REACT_APP_WRITER_MODE_HOSTNAMES` **Default: `localhost, localhost.org, 127.0.0.1`** -Only applicable if `REACT_APP_CRUD_MODE` is truthy. Essentially you can disable -certain CRUD mode features depending on the hostname you use. So if you built -the static assets (the React code) with `REACT_APP_CRUD_MODE=true` it might -disable certain features if you use a `window.location.hostname` that is _not_ -in this list. +Only applicable if `REACT_APP_WRITER_MODE` is truthy. Essentially you can +disable certain CRUD mode features depending on the hostname you use. So if you +built the static assets (the React code) with `REACT_APP_WRITER_MODE=true` it +might disable certain features if you use a `window.location.hostname` that is +_not_ in this list. The use case for this is when you build the site in a pull request and want flaws to _appear_ but without the "Fix fixable flaws" link or the "Open in your @@ -284,7 +287,7 @@ make sense to present the "Fix fixable flaws" button for example. ### `REACT_APP_ENABLE_PLUS` -**Default: `NODE_ENV==='development'`** +**Default: `false`** Determines if the MDN++ SPA should be reachable or not. diff --git a/docs/npm-packaging.md b/docs/npm-packaging.md index ac6a0c73132d..42bd88b53713 100644 --- a/docs/npm-packaging.md +++ b/docs/npm-packaging.md @@ -61,7 +61,7 @@ directories: `~/yari` and `~/content`. And you want to know if some edit to the First of all, make you relevant edits in `~/yari` then run: export REACT_APP_DISABLE_AUTH=true - export REACT_APP_CRUD_MODE=true + export REACT_APP_WRITER_MODE=true yarn build:prepare echo .git/info/exclude >> .npmignore echo .env >> .npmignore diff --git a/scripts/developing.sh b/scripts/developing.sh index 8640f31e07c6..b5c8cfb977e9 100755 --- a/scripts/developing.sh +++ b/scripts/developing.sh @@ -30,6 +30,7 @@ echo "--------------------" echo "Start the dev server" echo "--------------------" +export REACT_APP_WRITER_MODE=true export CONTENT_ROOT="mdn/content/files" ls "$CONTENT_ROOT/en-us/mdn/kitchensink" echo "" > client/.env diff --git a/testing/README.md b/testing/README.md index c7b2d989d296..d284583f6f45 100644 --- a/testing/README.md +++ b/testing/README.md @@ -100,7 +100,7 @@ developers would see. To run these you first need to run, in one terminal: yarn dev ``` -> NOTE: Ensure that you have `REACT_APP_CRUD_MODE` set to `true` in the `.env` +> NOTE: Ensure that you have `REACT_APP_WRITER_MODE` set to `true` in the `.env` > at the root of the project before running `yarn dev`. And in another terminal, run: