### Starting End-to-End Test Executables Source: https://github.com/automattic/wp-calypso/blob/trunk/desktop/README.md Manual commands to start the pre-packaged executables for end-to-end testing on different platforms. This includes macOS, Windows, and Linux. ```bash npx electron /path/to/linux-unpacked/resources/app ``` -------------------------------- ### Starting Calypso Development Server Source: https://github.com/automattic/wp-calypso/blob/trunk/desktop/README.md Commands to start the Calypso development server and then boot the desktop app to load the local Calypso instance. This is for a more efficient development experience. ```bash yarn start yarn run dev:localhost ``` -------------------------------- ### Installing Dependencies and Building Desktop App Source: https://github.com/automattic/wp-calypso/blob/trunk/desktop/README.md Core commands for setting up the project: installing root dependencies using yarn, exporting necessary environment variables for production builds, and building the desktop application. ```bash yarn export CONFIG_ENV='release' export CALYPSO_SECRETS_ENCRYPTION_KEY='' yarn run build-desktop:secrets yarn run build ``` -------------------------------- ### Run WP Calypso Server Application Example Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wpcom.js/examples/Readme.md This example demonstrates running an Express application that fetches blog posts via server-side requests. It requires a local setup and uses configuration data from a JSON file. ```bash $ make example-server ``` -------------------------------- ### Install project dependencies with Yarn Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/setup.md Installs all project dependencies defined in the `package.json` file using Yarn. The `--immutable` flag ensures that dependencies are installed exactly as specified, preventing unexpected changes. ```shell arch -x86_64 yarn install --immutable ``` -------------------------------- ### Install and Run Calypso Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/install.md Clones the Calypso repository, installs dependencies using yarn, and starts the development server. This is the primary command for getting Calypso running locally. ```bash $ git clone https://github.com/Automattic/wp-calypso.git $ cd wp-calypso $ yarn $ yarn start ``` -------------------------------- ### Make upload.html example use primary blog (JavaScript) Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wpcom-proxy-request/History.md Configures the `upload.html` example to utilize the user's primary blog, simplifying the example setup. ```JavaScript examples: make "upload.html" example use user's primary blog ``` -------------------------------- ### Install Yarn package manager Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/setup.md Installs the Yarn package manager using npm, ensuring it's installed with the i386 architecture for compatibility. Yarn is used for managing project dependencies. ```shell arch -x86_64 npm install yarn ``` -------------------------------- ### Install and Run Calypso Locally Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/CONTRIBUTING.md Steps to set up and run the Calypso project locally. Requires Git, Node.js, and Yarn. It involves cloning the repository, updating the hosts file, and running installation and start commands. ```Shell git clone # Add 127.0.0.1 calypso.localhost to your local hosts file yarn yarn start ``` -------------------------------- ### Install and Run Calypso Locally (Shell) Source: https://github.com/automattic/wp-calypso/blob/trunk/README.md Instructions for setting up and running the Calypso project locally. This involves cloning the repository, modifying the hosts file, and using Yarn for dependency management and starting the development server. ```Shell yarn yarn start ``` -------------------------------- ### Run Calypso Development Server Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/help-center/README.md To start developing the Help Center within Calypso, follow the standard Calypso development setup. Run `yarn start` to launch the development server. No additional configuration is typically required. ```shell yarn start ``` -------------------------------- ### Run Calypso with Limited Entry Points Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/install.md Starts the Calypso development server by building only the specified Webpack entry points. This helps to optimize build times by focusing on essential parts of the application. ```bash ENTRY_LIMIT=entry-login,entry-main npm start ``` -------------------------------- ### Install NodeJS version with nvm Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/setup.md Uses the Node Version Manager (nvm) to install the specific version of NodeJS required by the WP Calypso project. Replace `` with the actual version number. ```shell nvm install ``` -------------------------------- ### Initial Project Setup and Testing Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/photon/History.md This covers the initial commit and setup of the project, including adding a Makefile with a browserify target, a Readme.md file, a LICENSE file, and initial tests. It also mentions statically hashing the subdomain based on the URL. ```text - add Makefile, with browserify make target for browsers - add Readme.md file - add LICENSE file - idnex: statically hash the subdomain based on the URL - test: initial tests - initial commit - Readme: add npm install instructions ``` -------------------------------- ### Install nvm using i386 Homebrew Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/setup.md Installs the Node Version Manager (nvm) using the i386 version of Homebrew. This step is critical to ensure that Node.js versions installed via nvm are also the x86_64 variant, preventing potential compatibility issues. ```shell arch -x86_64 /usr/local/bin/brew install nvm ``` -------------------------------- ### Run Storybook for Onboarding Package Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/onboarding/src/step-container-v2/README.md Instructions to start the Storybook development server for the '@automattic/onboarding' package. This allows for interactive development and previewing of UI components. ```Shell yarn workspace @automattic/onboarding storybook:start ``` -------------------------------- ### Install i386 Homebrew on Apple Silicon Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/setup.md Installs Homebrew using the i386 architecture, which is crucial for ensuring compatibility with Node.js versions required by WP Calypso when running on Apple Silicon Macs with Rosetta 2 emulation. ```shell arch -x86_64 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" ``` -------------------------------- ### Create ExPlat Client Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/explat-client/README.md Initializes the ExPlat client with a configuration object. This client is self-contained, meaning it has no external dependencies and manages its own state, using LocalStorage if available or falling back to memory. ```javascript const exPlatClient = createExPlatClient(config) ``` -------------------------------- ### Running End-to-End Tests Source: https://github.com/automattic/wp-calypso/blob/trunk/desktop/README.md Instructions for setting environment variables and running the end-to-end test suite for the WordPress.com for Desktop application. Alternatively, a 'make' command can be used. ```bash export E2EGUTENBERGUSER= export E2EPASSWORD= yarn run test:e2e ``` ```bash make e2e ``` -------------------------------- ### Set active NodeJS version with nvm Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/setup.md Instructs nvm to use the previously installed version of NodeJS for the current shell session. This ensures that the correct Node.js environment is active for WP Calypso development. ```shell nvm use ``` -------------------------------- ### Install and Run A4A Locally Source: https://github.com/automattic/wp-calypso/blob/trunk/client/a8c-for-agencies/README.md Instructions to set up and run the Automattic for Agencies (A4A) project on your local machine. This involves cloning the repository, modifying the hosts file, and running specific yarn commands. ```Shell git clone # Add 127.0.0.1 agencies.localhost to your local hosts file yarn yarn start-a8c-for-agencies ``` -------------------------------- ### Simple Payments End-of-Year Guide Tour Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/examples/README.md This JavaScript tour, 'simple-payments-end-of-year-guide.js', was an example advertisement for the Simple Payments feature. It is designed to trigger on specific site paths for users with Simple Payments access, guiding them through page creation and the insertion of a Simple Payments button. ```JavaScript // Example tour file: client/layout/guided-tours/examples/simple-payments-end-of-year-guide.js // This tour was used as a temporary end-of-year advertisement for the Simple Payments feature. // It triggers on a variety of paths but only for sites with access to the Simple Payments feature. // The tour guides people through the creation of a page and the insertion of a Simple Payments button. ``` -------------------------------- ### GPL Interactive Program Notice Example Source: https://github.com/automattic/wp-calypso/blob/trunk/CREDITS.md An example of a short notice to be displayed when a program licensed under the GPL starts in interactive mode. ```GPL Gnomovision version 69, Copyright (C) year name of author Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. This is free software, and you are welcome to redistribute it under certain conditions; type `show c' for details. ``` -------------------------------- ### Creating Configuration File for Development Source: https://github.com/automattic/wp-calypso/blob/trunk/desktop/README.md Command to generate the configuration file required for running the application in development mode. ```bash yarn run build:config ``` -------------------------------- ### Comprehensive Guided Tour Step Example Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/API.md This example demonstrates a comprehensive usage of the 'Step' component in a guided tour. It showcases various props like 'name', 'placement', 'target', and 'arrow', along with a render prop for content. The content includes translated text, multiple paragraphs, and interactive tour controls like 'Continue', 'Next', and 'Quit' buttons, as well as a 'Link'. ```jsx { ( { translate } ) => (

Plain text description.

Multiple lines.

{ translate( 'Learn more about WordPress.com' ) } ) } ; ``` -------------------------------- ### Set Up Hello World Route Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/guide/hello-world.md Defines the main route handler for the 'hello-world' section in index.js. It checks if the feature flag is enabled and uses the page module to register the route, including site selection, navigation, and the custom controller. ```javascript import { isEnabled } from '@automattic/calypso-config'; import page from '@automattic/calypso-router'; import { makeLayout, render as clientRender } from 'calypso/controller'; import { navigation, siteSelection } from 'calypso/my-sites/controller'; import { helloWorld } from './controller'; export default () => { if ( isEnabled( 'hello-world' ) ) { page( '/hello-world/:site?', siteSelection, navigation, helloWorld, makeLayout, clientRender ); } else { page.redirect( '/' ); } }; ``` -------------------------------- ### Run Simple Site Help Center Development Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/help-center/README.md For developing the Help Center in Simple sites, navigate to the `apps/help-center` directory and run `yarn dev --sync`. This command enables live syncing for your changes. Ensure your site is sandboxed and accessible via `widgets.wp.com`. ```shell cd apps/help-center yarn dev --sync ``` -------------------------------- ### Start Node Debugger with Specific Port Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/install.md This snippet shows how to start the Node debugger on a specific port (5858) using the NODE_OPTIONS environment variable and yarn start. It's useful for debugging the main application process. ```bash NODE_OPTIONS="--inspect=5858" yarn start ``` -------------------------------- ### Boilerplate for Tour Configuration (index.js) Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/TUTORIAL.md This JavaScript snippet shows the essential boilerplate for a tour's main configuration file (`index.js`). It includes necessary imports from the guided tours system and the `makeTour` wrapper, along with importing the tour's metadata. ```javascript import { makeTour, Tour, Step, ButtonRow, Quit, Continue, } from 'calypso/layout/guided-tours/config-elements'; import { isNewUser } from 'calypso/state/guided-tours/contexts'; import meta from './meta'; export const TutorialSitePreviewTour = makeTour(); ``` -------------------------------- ### Start Node Debugger and Break on First Line Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/install.md This snippet demonstrates how to start the Node debugger and immediately pause execution on the first line of code using NODE_OPTIONS and yarn start. This is helpful for debugging the build process or initial application startup. ```bash NODE_OPTIONS="--inspect-brk" yarn start ``` -------------------------------- ### Run Storybook from Package Root Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/onboarding/src/step-container-v2/README.md Instructions to start the Storybook development server directly from the root of the current package. This is an alternative method for launching the Storybook environment. ```Shell yarn storybook:start ``` -------------------------------- ### Targeting by Class Name in JSX Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/API.md This example shows how to target a DOM element using its class name with a CSS selector in a Calypso Guided Tour's `Step` component. ```JSX ``` -------------------------------- ### Create React Component Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/guide/hello-world.md This snippet demonstrates the basic structure of a React component in JSX, including importing necessary modules and defining a render method to output markup. ```jsx import { Component } from 'react'; import Main from 'calypso/components/main'; export default class HelloWorld extends Component {} ``` ```jsx import { Component } from 'react'; export default class HelloWorld extends Component { render() { return (

Hello, World!

); } } ``` -------------------------------- ### Add First Tour Step (JSX) Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/TUTORIAL.md This snippet demonstrates how to add the initial step to a tour using the `` component in JSX. It includes configuration for targeting an element, positioning, and defining the content with translation capabilities. ```JSX { ( { translate } ) => (

{ translate( '{{strong}}View Site{{/strong}} shows you what your site looks like to visitors. Click it to continue.', { components: { strong: } }, ) }

)} ``` -------------------------------- ### Install Automattic Components and Color Schemes Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/components/README.md Installs the @automattic/components library and its dependent color schemes using Yarn. ```bash yarn add @automattic/components @automattic/calypso-color-schemes ``` -------------------------------- ### Ensure Dependencies are Installed Source: https://github.com/automattic/wp-calypso/blob/trunk/docs/troubleshooting.md A troubleshooting step for build errors, specifically 'Command failed with exit code 127', suggesting that `yarn` should be run before `yarn start` to ensure all project dependencies are installed. ```bash yarn ``` -------------------------------- ### Start Local Development Server (Yarn) Source: https://github.com/automattic/wp-calypso/blob/trunk/apps/design-system-docs/README.md Starts a local development server for the design system website. Changes are reflected live without server restarts. ```bash yarn start ``` -------------------------------- ### Decomposing `get` for `actionLog` Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/ARCHITECTURE-FUTURE.md Demonstrates how the `get` operation on `actionLog` can be decomposed using a `join` function for efficient traversal and memoization. This approach assumes `actionLog` can be treated as a monoid. ```javascript get( [ A, B, C ] ) === join( get( [ A, B ] ), get( [ C ] ) ); join = ( a, b ) => a.concat( b ); ``` -------------------------------- ### Docker: Build and Run Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wp-babel-makepot/README.md Builds a Docker image for wp-babel-makepot and then runs it, mounting local directories for source files and output. ```bash docker build -t wp-babel-makepot . docker run --init -it -v ~/path/to/source/files:/src -v ~/path/to/output:/build wp-babel-makepot ``` -------------------------------- ### Start Calypso Development Source: https://github.com/automattic/wp-calypso/blob/trunk/apps/help-center/README.md To begin developing the Help Center within Calypso, follow the standard Calypso development setup. This involves running the 'yarn start' command to initiate the development server. ```Shell yarn start ``` -------------------------------- ### Get @mention Suggestions Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wpcom.js/docs/users.md Provides an example of how to get @mention suggestions for a specific WordPress site using the Users#suggest method. It includes parameters for site and image size, and a callback function to handle the response. ```javascript users.suggest( { site: 'mytestsite.wordpress.com', image_size: 32 }, function ( err, info ) { // `info` data object } ); ``` -------------------------------- ### Install @automattic/site-admin Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/site-admin/README.md Instructions for installing the @automattic/site-admin package using either npm or yarn. ```sh npm install @automattic/site-admin ``` ```sh yarn add @automattic/site-admin ``` -------------------------------- ### Local Development: Install and Run Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wp-babel-makepot/README.md Installs dependencies and runs the wp-babel-makepot utility locally using yarn. Allows specifying source files, ignore patterns, and output file. ```bash yarn install yarn run start "some/src/**/*.js{,x}" -- --ignore "**/node_modules/**,**/*.spec.js,**/*.test.js" --output "./strings.pot" ``` -------------------------------- ### Targeting by Nested Selectors in JSX Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/API.md This example demonstrates targeting a specific child element (featured image) within a parent element that has certain state classes (has-thumbnail), using a CSS selector for Calypso Guided Tours. ```JSX ``` -------------------------------- ### Test Block Example - JavaScript Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs-new/new_style_guide.md Provides an example of a test block in JavaScript, which defines an individual test scenario. It follows the user story format 'As a I can ' to clearly state the purpose and expected outcome of the test. ```JavaScript test( 'As a WordPress.com user, I can use my Apple Id to authenticate ', async ( { ``` -------------------------------- ### wpcom.js Browser Example with iframe Proxy Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wpcom.js/examples/browser-proxy/batch.html Initializes wpcom.js, sets up the iframe proxy for requests, enables 'access all users blogs' mode, and executes a batch of API calls to fetch site information, posts, and reader data. ```javascript var wpcom = WPCOM(); // have this `wpcom` instance use the `wpcom-proxy-request` // function for API requests wpcom.request = wpcomProxyRequest; // upgrade to "access all users blogs" mode wpcom.request({ metaAPI: { accessAllUsersBlogs: true } }, function(err) { if (err) throw err; console.log('proxy now running in "access all user\'s blogs" mode'); }); wpcom .batch() .add('/sites/en.blog.wordpress.com') .add('/sites/en.blog.wordpress.com/posts') .add('/reader/tags') .add('/reader/lists') .add('/reader/teams') .run(function(err, me){ if (err) throw err; console.log(err); console.log(me); }); ``` -------------------------------- ### useSiteSettings Example: Store Address Form Source: https://github.com/automattic/wp-calypso/blob/trunk/client/signup/steps/woocommerce-install/hooks/use-site-settings/Readme.md Provides a practical example of using the useSiteSettings hook to create a form for managing a store's address. It utilizes the get and update functions for input handling and the save function for persistence. ```javascript import useSiteSettings from './use-site-settings'; function StoreAddressFrom() { const { get, save, update } = useSiteSettings( 'site-id' ); return (
update( { woocommerce_store_address: newAddress } ) } />
); } ``` -------------------------------- ### Fetch Premium Plugin Install Instructions Source: https://github.com/automattic/wp-calypso/blob/trunk/client/state/plugins/premium/README.md Fetches a list of plugins to auto-install for a given site, including their registration keys. This action is used in conjunction with the Redux store's dispatch function to manipulate the global state. ```javascript import { fetchInstallInstructions } from 'calypso/state/plugins/premium/actions'; fetchInstallInstructions( 106093271 ); ``` -------------------------------- ### Apply Clean History Patch Source: https://github.com/automattic/wp-calypso/blob/trunk/client/layout/guided-tours/docs/DEBUGGING.md This command applies a patch file to clean the guided tours history for debugging purposes. It requires Git to be installed and the patch file to be present in the specified location relative to the application root. ```Bash git apply client/layout/guided-tours/docs/patch/clean-history.patch ``` -------------------------------- ### Wizard Component Usage Example Source: https://github.com/automattic/wp-calypso/blob/trunk/client/components/wizard/README.md Demonstrates how to use the Wizard component by defining components for each step and providing an array of step names. It shows the necessary props like `components`, `steps`, `stepName`, and navigation text. ```javascript const components = { first: , second: , }; const steps = [ 'first', 'second' ]; ; ``` -------------------------------- ### Initialize WPCOMProxyRequest and Fetch Site Data Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/wpcom-proxy-request/examples/upload.html Initializes the WPCOMProxyRequest with specific metaAPI settings and fetches the primary blog data for the current user. This sets up the proxy and retrieves the necessary site ID for subsequent media uploads. ```JavaScript WPCOMProxyRequest({ metaAPI: { accessAllUsersBlogs: true } }, function(err) { if (err) throw err; console.log('proxy now running in "access all user\'s blogs" mode'); }); var site; var input = document.getElementById('file'); WPCOMProxyRequest('/me', function (err, data) { if (err) throw err; site = data.primary_blog; document.getElementById('site').innerHTML = site; input.removeAttribute('disabled'); }); ``` -------------------------------- ### Date Range Matcher Example Source: https://github.com/automattic/wp-calypso/blob/trunk/packages/ui/src/calendar/date-calendar/README.md Demonstrates a date matcher that matches dates within a specified range (inclusive of both start and end dates). ```typescript const rangeMatcher: DateRange = { from: new Date( 2019, 1, 2 ), to: new Date( 2019, 1, 5 ), }; // Will match the days between the 2nd and the 5th of February 2019 (inclusive) ``` -------------------------------- ### Define Setup/Teardown Hooks Source: https://github.com/automattic/wp-calypso/blob/trunk/test/e2e/docs/writing_tests.md Provides an example of defining a 'beforeAll' hook, which runs once before any tests in the current scope. Hooks are used for setup and teardown operations. ```typescript beforeAll( async () => { logoImage = await MediaHelper.createTestImage(); } ); ``` -------------------------------- ### Plans Page Implementation Source: https://github.com/automattic/wp-calypso/blob/trunk/client/my-sites/plans/jetpack-plans/README.md An example implementation of the plans page, demonstrating how the routing is set up and how the PlansPage component is integrated. This shows the practical application of the routing configuration. ```JavaScript import page from 'page'; import { withFilters } from './filters'; import PlansPage from './plans-page'; const setupPlansRoutes = (rootPath) => { page(`${rootPath}/:duration?`, withFilters(PlansPage)); }; export default setupPlansRoutes; ```