### Run React Application Development Commands Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md These shell commands are essential for setting up and running the React application locally. `npm install` fetches all project dependencies defined in `package.json`, while `npm start` initiates the development server, typically opening the application in a web browser for local testing and development. ```bash npm install ``` ```bash npm start ``` -------------------------------- ### Install React Storybook Global CLI Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This command installs the `getstorybook` command-line interface globally using npm. The `getstorybook` tool simplifies the setup process for React Storybook within a project, allowing developers to quickly begin isolating and testing UI components. ```sh npm install -g getstorybook ``` -------------------------------- ### Install Surge CLI Globally Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Instructions to install the Surge command-line interface globally using npm, which is required for deploying web projects to Surge. ```sh npm install -g surge ``` -------------------------------- ### Install Project Dependencies using npm Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Demonstrates how to install new packages and dependencies into a React project using the npm package manager, saving them to the project's `package.json` file. ```shell npm install --save ``` -------------------------------- ### Install and Run Static Server with Serve Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Instructions for installing the `serve` static server globally via npm and then using it to serve a Create React App production build from the `build` directory. This command will typically serve the site on port 5000. ```sh npm install -g serve serve -s build ``` -------------------------------- ### Automate Sass Compilation with npm Start and Build Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Integrates the `watch-css` and `build-css` commands into the main `npm start` and `npm build` scripts using `npm-run-all`. This ensures Sass compilation runs automatically when starting the development server or building the production application. ```json "scripts": { "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", - "start": "react-scripts start", - "build": "react-scripts build", + "start-js": "react-scripts start", + "start": "npm-run-all -p watch-css start-js", + "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } ``` -------------------------------- ### Install node-sass-chokidar Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Installs `node-sass-chokidar` as a development dependency, which is a robust alternative to `node-sass` for compiling Sass/Less files, addressing common performance and watch issues. ```npm npm install node-sass-chokidar --save-dev ``` -------------------------------- ### Installing React Bootstrap and Bootstrap via npm Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Instructions for installing the `react-bootstrap` library and the core `bootstrap` CSS framework using npm. Both packages are required for integrating Bootstrap components and styles with React applications. ```shell npm install react-bootstrap --save npm install bootstrap@3 --save ``` -------------------------------- ### Deploy React App to Now (Vercel) using CLI Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Steps to deploy a React application to Now (zeit.co, now Vercel) using its command-line tool. This process includes installing the `now` CLI, building the React application, navigating into the build output directory, and then executing the `now` deployment command with a specified project name. ```shell npm install -g now npm run build cd build now --name your-project-name ``` -------------------------------- ### Example Rendered HTML with Embedded Environment Variables Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Illustrates the resulting HTML structure after a React application builds, showing how `process.env` variables are replaced with their actual values (e.g., 'abcdef' for `REACT_APP_SECRET_CODE`) and `NODE_ENV` is set to 'development' when running `npm start`. ```html
You are running this application in development mode.
``` -------------------------------- ### Install npm-run-all for Parallel Script Execution Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Installs `npm-run-all` as a development dependency. This utility provides a cross-platform way to run multiple npm scripts in parallel or sequentially, which is useful for automating build processes. ```npm npm install --save-dev npm-run-all ``` -------------------------------- ### Install jest-enzyme for Enhanced Jest Matchers Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This shell command installs `jest-enzyme` (specifically version 2.x), a library that extends Jest with custom matchers tailored for testing React components with Enzyme, improving test readability and conciseness. ```sh npm install --save-dev jest-enzyme@2.x ``` -------------------------------- ### Specify Project Path for Surge Deployment Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Example of how to specify the 'build' folder as the project path when prompted by the Surge CLI during the deployment process for a React application. ```sh project path: /path/to/project/build ``` -------------------------------- ### Install gh-pages for GitHub Pages Deployment Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This command installs the 'gh-pages' package as a development dependency. This package is essential for automating the deployment of your built React application to GitHub Pages. ```sh npm install --save-dev gh-pages ``` -------------------------------- ### Deploy React App to Netlify using CLI Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Instructions for manual deployment of a React application to Netlify's CDN using the Netlify command-line interface. This involves installing the CLI tool and then executing the deployment command from the project directory, typically pointing to the build output. ```shell npm install netlify-cli netlify deploy ``` -------------------------------- ### Install Enzyme and React Test Renderer for Component Testing Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This shell command installs `enzyme` and `react-test-renderer` as development dependencies. These libraries are essential for advanced React component testing, enabling shallow and full rendering capabilities. ```sh npm install --save-dev enzyme react-test-renderer ``` -------------------------------- ### Firebase CLI Initialization Process Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This snippet shows the interactive output of the 'firebase init' command, guiding the user through associating a Firebase project, configuring database rules, and setting up hosting with a public directory and single-page app rewrite. ```sh === Project Setup First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project. ? What Firebase project do you want to associate as default? Example app (example-app-fd690) === Database Setup Firebase Realtime Database Rules allow you to define how your data should be structured and when your data can be read from and written to. ? What file should be used for Database Rules? database.rules.json ✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json. Future modifications to database.rules.json will update Database Rules when you run firebase deploy. === Hosting Setup Your public directory is the folder (relative to your project directory) that will contain Hosting assets to uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory. ? What do you want to use as your public directory? build ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ✔ Wrote build/index.html i Writing configuration info to firebase.json... i Writing project information to .firebaserc... ✔ Firebase initialization complete! ``` -------------------------------- ### Initialize React Storybook in Project Directory Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md After installing the global CLI, this command is executed within a React application's root directory. It automatically configures and integrates React Storybook into the project, preparing it for isolated component development and state visualization. ```sh getstorybook ``` -------------------------------- ### Build React App for Production Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Compiles and optimizes the React application for production deployment. This command creates a minified and hashed build in the 'build' folder, ready for deployment. ```bash npm run build ``` -------------------------------- ### Run React App in Development Mode Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Starts the development server for the React application, making it accessible via 'http://localhost:3000'. The page will automatically reload on code changes, and lint errors will be displayed in the console. ```bash npm start ``` -------------------------------- ### Display Serve Command Line Options Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Command to display a comprehensive list of all available command-line options and flags for the `serve` static server, useful for customization like changing the default port. ```sh serve -h ``` -------------------------------- ### Example Sass Import Statements Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Demonstrates how to use the configured include paths in Sass files to import styles from local directories (e.g., `styles/_colors.scss`) and from `node_modules` (e.g., `nprogress/nprogress`). ```scss @import 'styles/_colors.scss'; // assuming a styles directory under src/ @import 'nprogress/nprogress'; // importing a css file from the nprogress node module ``` -------------------------------- ### Setting Temporary Environment Variables on Windows (cmd.exe) Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Shows the command-line syntax for setting a temporary environment variable (`REACT_APP_SECRET_CODE`) and immediately running `npm start` on Windows using `cmd.exe`. Note the intentional lack of whitespace between `set` and the variable assignment. ```cmd set REACT_APP_SECRET_CODE=abcdef&&npm start ``` -------------------------------- ### Configure React Development Server Proxy in package.json Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Add a 'proxy' field to your application's `package.json` file. This tells the development server to forward any unrecognized requests (those not for static assets and without a `text/html` accept header) to the specified backend API server. This setup is effective only during development (`npm start`) and helps mitigate CORS issues. ```json "proxy": "http://localhost:4000" ``` -------------------------------- ### Understand Create React App Folder Structure Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Illustrates the default directory layout of a Create React App project after initialization, highlighting essential files and folders like 'public/index.html' and 'src/index.js' which must exist with exact filenames. ```plaintext my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg ``` -------------------------------- ### Basic Node.js Express Server for Static Files Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md A foundational Node.js Express server setup designed to serve static files from a Create React App's `build` directory. It sets up a route for the root path to serve `index.html` and listens on port 9000. ```javascript const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'build'))); app.get('/', function (req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); app.listen(9000); ``` -------------------------------- ### Installing Flow Type Checker via npm Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Command to install `flow-bin` as a development dependency using npm. Flow is a static type checker for JavaScript that helps identify and prevent common type-related errors early in the development process. ```shell npm install --save-dev flow-bin ``` -------------------------------- ### Deploying React App to Firebase Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This snippet illustrates the output of the 'firebase deploy' command, showing the progress of deploying database rules and hosting assets, including file uploads and the final deployment completion with project console and hosting URLs. ```sh === Deploying to 'example-app-fd690'... i deploying database, hosting ✔ database: rules ready to deploy. i hosting: preparing build directory for upload... Uploading: [============================== ] 75%✔ hosting: build folder uploaded successfully ✔ hosting: 8 files uploaded successfully i starting release process (may take several minutes)... ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/example-app-fd690/overview Hosting URL: https://example-app-fd690.firebaseapp.com ``` -------------------------------- ### Setting Temporary Environment Variables on Linux/macOS (Bash) Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Illustrates the Bash command-line syntax for setting a temporary environment variable (`REACT_APP_SECRET_CODE`) and running `npm start` on Linux or macOS systems. The variable is set for the duration of the command execution. ```bash REACT_APP_SECRET_CODE=abcdef npm start ``` -------------------------------- ### Basic Jest Unit Test Example Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This JavaScript code snippet illustrates a foundational unit test using Jest. It demonstrates how to import a module (e.g., a `sum` function) and define a test case using `it()`. The `expect()` global function is then used in conjunction with the `toEqual()` matcher to assert that the `sum` function produces the expected output for given inputs. ```javascript import sum from './sum'; it('sums numbers', () => { expect(sum(1, 2)).toEqual(3); expect(sum(2, 2)).toEqual(4); }); ``` -------------------------------- ### Configure Multiple Proxies with Advanced Path Matching in React App Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This example illustrates how to define multiple proxy rules in `package.json` for a React application. It shows various configurations, including different targets, SSL options, path rewriting, and advanced path matching using `*` and `**` wildcards for precise routing. ```javascript { // ... "proxy": { // Matches any request starting with /api "/api": { "target": "", "ws": true // ... }, // Matches any request starting with /foo "/foo": { "target": "", "ssl": true, "pathRewrite": { "^/foo": "/foo/beta" } // ... }, // Matches /bar/abc.html but not /bar/sub/def.html "/bar/*.html": { "target": "", // ... }, // Matches /bar/abc.html and /bar/sub/def.html "/baz/**/*.html": { "target": "" // ... } } // ... } ``` -------------------------------- ### Enable HTTPS for React Dev Server on Windows (CMD) Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This command demonstrates how to enable HTTPS for the Create React App development server on Windows. By setting the `HTTPS` environment variable to `true` before running `npm start`, the server will serve content over HTTPS using a self-signed certificate. ```cmd set HTTPS=true&&npm start ``` -------------------------------- ### Execute GitHub Pages Deployment Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This command triggers the deployment process for your React application to GitHub Pages. It executes the 'deploy' script defined in your 'package.json', which in turn runs the 'predeploy' script (building the app) and then publishes the 'build' directory. ```sh npm run deploy ``` -------------------------------- ### Conditional Logic Based on NODE_ENV in JavaScript Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Provides an example of using `process.env.NODE_ENV` to conditionally execute code, such as disabling analytics in non-production environments. This code is often stripped out by minifiers during production builds, resulting in smaller bundles. ```js if (process.env.NODE_ENV !== 'production') { analytics.disable(); } ``` -------------------------------- ### Configure jest-enzyme in React Test Environment Setup Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This JavaScript snippet demonstrates how to integrate `jest-enzyme` into your React project's test setup. By importing it in `src/setupTests.js`, its custom matchers become globally available for all Jest tests, streamlining component assertions. ```js // src/setupTests.js import 'jest-enzyme'; ``` -------------------------------- ### Implement Dynamic Code Splitting with import() Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Demonstrates how to use dynamic `import()` for code splitting in a React application. This allows loading modules on demand, improving initial load performance. The example shows a simple module and its dynamic import within a React component's event handler. ```javascript const moduleA = 'Hello'; export { moduleA }; ``` ```javascript import React, { Component } from 'react'; class App extends Component { handleClick = () => { import('./moduleA') .then(({ moduleA }) => { // Use moduleA }) .catch(err => { // Handle failure }); }; render() { return (
); } } export default App; ``` -------------------------------- ### Example CSS for Flexbox Layout (Before Autoprefixing) Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This CSS snippet defines a basic flexbox layout for an element with the class `App`. It sets the display to flex, the flex direction to row, and aligns items to the center. This is the original, un-prefixed version of the CSS. ```css .App { display: flex; flex-direction: row; align-items: center; } ``` -------------------------------- ### Launch React App Test Runner Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Initiates the test runner in interactive watch mode, allowing developers to run tests and see results as code changes. This command provides a continuous testing environment. ```bash npm test ``` -------------------------------- ### Add Deployment Scripts to package.json for GitHub Pages Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This snippet shows how to add 'predeploy' and 'deploy' scripts to the 'scripts' section of your 'package.json'. The 'predeploy' script automatically runs 'npm run build' before 'deploy', ensuring your application is built before publishing to GitHub Pages. ```js // ... "scripts": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } ``` -------------------------------- ### Assert Specific React Component Output with Enzyme and Jest Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This JavaScript example demonstrates how to verify specific JSX output within a shallow-rendered React component. It utilizes Enzyme's `shallow` API to wrap the component and Jest's `toEqual` matcher to assert the presence of a particular element, such as a welcome message. ```js import React from 'react'; import { shallow } from 'enzyme'; import App from './App'; it('renders welcome message', () => { const wrapper = shallow(); const welcome =

Welcome to React

; // expect(wrapper.contains(welcome)).to.equal(true); expect(wrapper.contains(welcome)).toEqual(true); }); ``` -------------------------------- ### Create React App Environment Variables Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Documentation for various environment variables that can be set to adjust development and production settings for Create React App, covering aspects like browser behavior, server host and port, HTTPS, public URL, and continuous integration (CI) specific behaviors. ```APIDOC Environment Variables: BROWSER: Description: By default, Create React App opens the default system browser. Specify a browser to override this, or set to 'none' to disable. A node script can be specified for custom launch. Development: Supported Production: Not Supported HOST: Description: Specifies the host for the development web server. Defaults to 'localhost'. Development: Supported Production: Not Supported PORT: Description: Specifies the port for the development web server. Defaults to 3000 or the next available port. Development: Supported Production: Not Supported HTTPS: Description: When set to 'true', runs the development server in HTTPS mode. Development: Supported Production: Not Supported PUBLIC_URL: Description: Forces assets to be referenced verbatim to the provided URL (including hostname), useful for CDN hosting or non-root deployments. Development: Not Supported Production: Supported CI: Description: When set to 'true', treats warnings as build failures and makes the test runner non-watching. Most CI systems set this flag by default. Development: Conditional Production: Supported ``` -------------------------------- ### Enable HTTPS for React Dev Server on Linux/macOS (Bash) Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md This command shows how to enable HTTPS for the Create React App development server on Linux or macOS. Setting the `HTTPS` environment variable to `true` before `npm start` forces the dev server to use HTTPS with a self-signed certificate. ```bash HTTPS=true npm start ``` -------------------------------- ### Define and Import React Components Source: https://github.com/danielphelps/b1-servicelayer-react/blob/master/README.md Demonstrates how to define a basic React class component and subsequently import and use it within another component. This illustrates the standard ES6 module import/export patterns for React applications. ```javascript import React, { Component } from 'react'; class Button extends Component { render() { // ... } } export default Button; // Don’t forget to use export default! ``` ```javascript import React, { Component } from 'react'; import Button from './Button'; // Import a component from another file class DangerButton extends Component { render() { return