### Start Styleguidist Server Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Starts the Styleguidist development server using the configured npm script. This allows you to view and interact with your component style guide. ```sh npm run styleguide ``` -------------------------------- ### Install npm-run-all Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the npm-run-all package, a utility for running multiple npm scripts. ```sh npm install --save npm-run-all ``` -------------------------------- ### Install React Styleguidist Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the `react-styleguidist` npm package as a project dependency. This package is used for creating style guides and developing React components in isolation. ```sh npm install --save react-styleguidist ``` ```sh yarn add react-styleguidist ``` -------------------------------- ### Add Styleguidist Scripts to package.json Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Adds scripts to the `package.json` file for starting and building Styleguidist. These scripts enable easy management of the style guide server and build process. ```diff "scripts": { + "styleguide": "styleguidist server", + "styleguide:build": "styleguidist build", "start": "react-scripts start", ``` -------------------------------- ### Install npm-run-all (yarn) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the npm-run-all package using yarn. ```sh yarn add npm-run-all ``` -------------------------------- ### Install and Run Serve for Static Deployment Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the 'serve' package globally and then uses it to serve the 'build' directory, making the static site accessible. The port can be customized. ```sh npm install -g serve serve -s build ``` -------------------------------- ### Installing React Bootstrap and Bootstrap with npm Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs React Bootstrap and Bootstrap 3 using npm, including the necessary CSS files for styling. ```bash npm install --save react-bootstrap bootstrap@3 ``` -------------------------------- ### Installing Flow Bin Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the `flow-bin` package, which provides the Flow static type checker for the project. ```bash npm install --save flow-bin ``` ```bash yarn add flow-bin ``` -------------------------------- ### Installing Enzyme for React Component Testing Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Shows the npm and yarn commands to install Enzyme and its React adapter, which is necessary for shallow rendering and more advanced component testing strategies. ```sh npm install --save enzyme enzyme-adapter-react-16 react-test-renderer ``` ```bash yarn add enzyme enzyme-adapter-react-16 react-test-renderer ``` -------------------------------- ### Installing React Bootstrap and Bootstrap with yarn Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs React Bootstrap and Bootstrap 3 using yarn, including the necessary CSS files for styling. ```bash yarn add react-bootstrap bootstrap@3 ``` -------------------------------- ### Deploy to Now (ZEIT Now) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Deploy your application using the Now CLI for zero-configuration deployments. Install the Now CLI, build your app, navigate to the build directory, and run the `now` command with your project name. ```shell npm install -g now npm run build cd build now --name your-project-name ``` -------------------------------- ### Install Storybook CLI Globally Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the Storybook command-line interface globally using npm. This is a prerequisite for using the `getstorybook` command to set up Storybook in your project. ```sh npm install -g @storybook/cli ``` -------------------------------- ### Install Prettier and Husky for Git Hooks (npm) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the necessary npm packages (husky, lint-staged, prettier) to automate code formatting before each git commit. ```sh npm install --save husky lint-staged prettier ``` -------------------------------- ### Fetching Data with AJAX Requests Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This JavaScript snippet shows a basic example of fetching data using the `fetch` API in a jss-app-templates project. It demonstrates how to make a GET request and handle the response. ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` -------------------------------- ### Update start and build scripts with npm-run-all Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Updates the 'start' and 'build' scripts in package.json to include CSS preprocessor commands using npm-run-all. ```diff "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-js": "react-scripts build", + "build": "npm-run-all build-css build-js", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } ``` -------------------------------- ### Start JSS Local Development Server Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Starts a local development server for disconnected Sitecore-less development. Content data is pulled from local static sources. Sitecore is not required for this mode. ```bash jss start ``` -------------------------------- ### Install jest-enzyme Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Provides the npm and yarn commands to install the `jest-enzyme` package for enhanced testing capabilities. ```sh npm install --save jest-enzyme ``` ```sh yarn add jest-enzyme ``` -------------------------------- ### Adding Bootstrap Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This example demonstrates how to add Bootstrap to a jss-app-templates project. It involves installing Bootstrap via npm and importing its CSS file. ```bash # Install Bootstrap npm install bootstrap # Import Bootstrap CSS in your App.js or index.js import 'bootstrap/dist/css/bootstrap.min.css'; ``` -------------------------------- ### Deploy to Surge CLI Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Deploy your application to Surge.sh using their CLI. Install the Surge CLI globally, run the `surge` command, and specify the `build` folder as the project path. For client-side routing, rename `index.html` to `200.html`. ```shell npm install -g surge surge ``` ```text project path: /path/to/project/build ``` -------------------------------- ### Install gh-pages for React Deployment Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the `gh-pages` package as a development dependency for deploying React applications to GitHub Pages. ```sh npm install --save gh-pages ``` ```sh yarn add gh-pages ``` -------------------------------- ### Enable HTTPS in Development Server (Windows) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md To serve pages over HTTPS in the development server, set the HTTPS environment variable to 'true' before starting the server. This example shows how to do it on Windows command prompt. ```cmd set HTTPS=true&&npm start ``` -------------------------------- ### Install Source Map Explorer Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the source-map-explorer package for analyzing JavaScript bundle sizes. This is a prerequisite for bundle analysis. ```sh npm install --save source-map-explorer ``` ```sh yarn add source-map-explorer ``` -------------------------------- ### Install Prettier and Husky for Git Hooks (yarn) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the necessary yarn packages (husky, lint-staged, prettier) to automate code formatting before each git commit. ```sh yarn add husky lint-staged prettier ``` -------------------------------- ### Start Server with HTTPS Enabled Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Starts the development server with HTTPS enabled. This is achieved by setting the HTTPS environment variable to true before running the npm start command. The syntax varies slightly between Windows PowerShell and Linux/macOS Bash. ```powershell ($env:HTTPS = $true) -and (npm start) ``` ```bash HTTPS=true npm start ``` -------------------------------- ### Install React Router DOM (npm) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the React Router library for managing navigation within a React application using npm. ```sh npm install --save react-router-dom ``` -------------------------------- ### Install node-sass-chokidar (yarn) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the node-sass-chokidar package using yarn, a dependency manager for JavaScript. ```sh yarn add node-sass-chokidar ``` -------------------------------- ### Deploy to Netlify CLI Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Manually deploy your application to Netlify's CDN using the Netlify CLI. This involves installing the CLI globally and running the deploy command, specifying the 'build' directory as the deployment target. ```shell npm install netlify-cli -g netlify deploy ``` -------------------------------- ### npm Start Script Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md The `npm start` command runs the React application in development mode. It opens the app at `http://localhost:3000` and enables live reloading for edits. Linting errors are displayed in the console. ```bash npm start ``` -------------------------------- ### Install React Router DOM (yarn) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the React Router library for managing navigation within a React application using yarn. ```sh yarn add react-router-dom ``` -------------------------------- ### Install node-sass-chokidar (npm) Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs the node-sass-chokidar package using npm, which is a tool for compiling Sass files. ```sh npm install --save node-sass-chokidar ``` -------------------------------- ### Install Dependency with npm Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs a new dependency, like 'react-router', into your project using npm. This command adds the specified package to your project's dependencies. ```sh npm install --save react-router ``` -------------------------------- ### Node.js Express Server for Static Files Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md A programmatic example using Node.js and Express to serve static files from the 'build' directory and handle root requests by serving 'index.html'. ```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); ``` -------------------------------- ### Netlify Continuous Delivery Setup Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Configure continuous delivery with Netlify by linking your Git repository. Set the build command to `yarn build` and the publish directory to `build`. Netlify will automatically build and deploy on Git pushes or pull requests. ```text 1. [Start a new netlify project](https://app.netlify.com/signup) 2. Pick your Git hosting service and select your repository 3. Set `yarn build` as the build command and `build` as the publish directory 4. Click `Deploy site` ``` -------------------------------- ### Configure JSS Connection to Sitecore Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Sets up the connection between the JSS application and a local Sitecore installation. This command configures the necessary connection details. ```bash jss setup ``` -------------------------------- ### Install Dependency with Yarn Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Installs a new dependency, like 'react-router', into your project using yarn. This command adds the specified package to your project's dependencies. ```sh yarn add react-router ``` -------------------------------- ### Configure Jest's setupTestFrameworkScriptFile Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Shows how to manually configure Jest to use a custom test setup file (e.g., `src/setupTests.js`) after ejecting from create-react-app. ```json "jest": { // ... "setupTestFrameworkScriptFile": "/src/setupTests.js" } ``` -------------------------------- ### Code Splitting Example Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This code demonstrates code splitting in jss-app-templates using React.lazy and Suspense for dynamic component loading. This improves initial load performance by only loading code when it's needed. ```javascript import React, { Suspense, lazy } from 'react'; const OtherComponent = lazy(() => import('./OtherComponent')); function MyApp() { return (
Loading...
}> ); } ``` -------------------------------- ### Mock Browser APIs like localStorage Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Provides an example of mocking the browser's `localStorage` API using Jest mocks for testing components that interact with it. ```js const localStorageMock = { getItem: jest.fn(), setItem: jest.fn(), clear: jest.fn() }; global.localStorage = localStorageMock; ``` -------------------------------- ### Importing a Component Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This example demonstrates how to import and use a React component within your jss-app-templates project. It follows standard ES6 import syntax. ```javascript import React from 'react'; import MyComponent from './MyComponent'; function App() { return (
); } ``` -------------------------------- ### Running npm Scripts in jss-app-templates Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This section details the common npm scripts available for managing the jss-app-templates project. These scripts facilitate starting the development server, running tests, building the project for production, and ejecting from the default configuration. ```bash npm start npm test npm run build npm run eject ``` -------------------------------- ### Create JSS App from Template Source: https://github.com/jflheureux/jss-app-templates/blob/master/README.md Command to create a new JSS application using a custom template from a specified repository. Requires the JSS CLI to be installed. ```bash jss create --repository jflheureux/jss-app-templates ``` -------------------------------- ### Testing React Component Rendering Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Provides an example of a basic 'smoke test' for a React component using Jest and ReactDOM. This test verifies that a component can render without errors. ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(, div); }); ``` -------------------------------- ### Configure Web App Manifest for Start URL Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Modifies the web app manifest file ('public/manifest.json') to set the 'start_url' to '.' This ensures that Create React App shortcuts added to a device's home screen correctly point to the root of the application, which is necessary for client-side routers. ```json { "start_url": "." } ``` -------------------------------- ### HTML Template with Meta Tag Placeholders Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md An example HTML structure demonstrating the use of placeholders for dynamic meta tags like Open Graph title and description. These placeholders (__OG_TITLE__, __OG_DESCRIPTION__) are intended to be replaced on the server with URL-specific content. ```html ``` -------------------------------- ### CSS Post-Processing with Autoprefixer Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Illustrates the transformation of CSS by Autoprefixer, which automatically adds vendor prefixes for better browser compatibility. The example shows a typical flexbox style before and after autoprefixing. ```css .App { display: flex; flex-direction: row; align-items: center; } ``` ```css .App { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } ``` -------------------------------- ### npm Run Eject Script Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md The `npm run eject` command is a one-way operation that moves all configuration files (Webpack, Babel, ESLint, etc.) from `react-scripts` directly into the project. This provides full control over the build configuration but removes the abstraction of `react-scripts`. After ejecting, scripts like `npm start` will point to the copied configurations. ```bash npm run eject ``` -------------------------------- ### Serve Help Options Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Displays the available command-line options for the 'serve' utility, allowing customization of its behavior, such as port selection. ```sh serve -h ``` -------------------------------- ### Configure ESLint for Editor Integration Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This snippet shows how to configure ESLint for editor integration by extending the 'react-app' configuration. This setup affects only the editor's linting output and not the terminal or browser console linting. ```json { "extends": "react-app" } ``` -------------------------------- ### Set Temporary Environment Variables in Shell Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Demonstrates how to temporarily set environment variables for the current shell session, which are then used by npm start. This method is OS-dependent. Quotes are necessary for variable assignment in Windows cmd.exe to prevent trailing whitespace. ```cmd set "REACT_APP_SECRET_CODE=abcdef" && npm start ``` ```powershell ($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) ``` ```bash REACT_APP_SECRET_CODE=abcdef npm start ``` -------------------------------- ### Define Development Environment Variables in .env Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Explains how to create a .env file in the project root to define permanent environment variables for development. Custom variables must start with REACT_APP_. Changes require restarting the development server. .env files should generally be checked into source control, except for .env*.local files. ```dotenv REACT_APP_SECRET_CODE=abcdef ``` -------------------------------- ### Reference REACT_APP_ Variables in HTML Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Allows referencing environment variables prefixed with REACT_APP_ directly within the public/index.html file. Variables are injected at build time. Only variables starting with REACT_APP_ or built-in variables like NODE_ENV and PUBLIC_URL will work. ```html %REACT_APP_WEBSITE_NAME% ``` -------------------------------- ### Initialize Storybook in Project Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Runs the `getstorybook` command to set up Storybook within your application directory. This command typically scaffolds the necessary configuration files for Storybook. ```sh getstorybook ``` -------------------------------- ### Deploy JSS Application to Sitecore Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Deploys the JSS application, including configuration and content, to the connected Sitecore instance. The `-c` flag deploys configuration, and `-d` deploys data. ```bash jss deploy app -c -d ``` -------------------------------- ### Debugging CRA Tests in Chrome via package.json Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This script configures your package.json to enable debugging of Jest tests in Chrome. It uses `react-scripts --inspect-brk test --runInBand --env=jsdom` to pause execution before tests begin, allowing a Chrome debugger to attach. Ensure Node.js version 8 or higher is installed. The `--runInBand` flag is crucial for debugging as it prevents Jest from running tests in parallel processes. ```json { "scripts": { "test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom" } } ``` -------------------------------- ### Configure package.json Scripts for Deployment Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Adds `predeploy` and `deploy` scripts to `package.json` to automate the build and deployment process to GitHub Pages. ```json "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build" } ``` -------------------------------- ### Troubleshoot Deployment with Personal Access Token Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Provides steps to resolve deployment errors like '/dev/tty: No such a device or address' by generating a Personal Access Token and updating the Git remote URL. ```sh git remote set-url origin https://:@github.com// ``` -------------------------------- ### Execute Deployment Command Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Runs the configured deploy script to build and publish the React application to GitHub Pages. ```sh npm run deploy ``` -------------------------------- ### Deploy JSS Configuration to Sitecore Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Deploys Sitecore configuration patch files to the Sitecore instance. Ensure the `hostName` is correctly set in your hosts file before deployment. ```bash jss deploy config ``` -------------------------------- ### Deploy React App to Firebase Hosting Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This command initiates the deployment of the React application to Firebase Hosting after a production build has been created. The output shows the progress of database and hosting deployment, file uploads, and the final success message 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 ``` -------------------------------- ### Configure Apache for Client-Side Routing Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Sets up an Apache HTTP Server using a .htaccess file to serve 'index.html' for any request that does not match an existing file. This is crucial for applications using client-side routing with the HTML5 history API. ```apache Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] ``` -------------------------------- ### Initialize Firebase Hosting Configuration Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This code block demonstrates the interactive prompts and successful completion of the Firebase initialization process for hosting. It includes selecting a Firebase project, configuring database rules, setting the public directory to 'build', and enabling single-page app functionality. ```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! ``` -------------------------------- ### Format entire project with Prettier Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Manually formats all files in the 'src' directory using Prettier with single quote preference and write mode. ```sh ./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}" ``` -------------------------------- ### Netlify Client-Side Routing Configuration Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md To support client-side routing with `pushState` on Netlify, create a `public/_redirects` file. This file contains rewrite rules that direct all requests to `index.html`. ```text /* /index.html 200 ``` -------------------------------- ### npm Run Build Script Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md The `npm run build` command creates an optimized production build of the React application in the `build` folder. It minifies the code and includes content hashes in filenames for efficient caching and deployment. ```bash npm run build ``` -------------------------------- ### Import jest-enzyme Matchers Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Shows how to import `jest-enzyme` in `src/setupTests.js` to make its custom matchers globally available for all tests. ```js import 'jest-enzyme'; ``` -------------------------------- ### Configure package.json for User Page Deployment Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Modifies the `deploy` script in `package.json` to push deployments to the `master` branch, suitable for GitHub user pages. ```json "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -b master -d build" } ``` -------------------------------- ### Run Bundle Analysis Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Commands to execute the production build and then run the analysis script to examine the bundle size. This helps identify code bloat. ```sh npm run build npm run analyze ``` -------------------------------- ### Dynamic Module Import with Promise Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Illustrates code splitting in React using dynamic `import()` syntax. This loads modules on demand, improving initial load times. ```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; ``` -------------------------------- ### Travis CI Configuration for Node.js Projects Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md A basic .travis.yml file for a Node.js project. It specifies the Node.js version, enables caching for node_modules, and defines build and test scripts. ```yaml language: node_js node_js: - 6 cache: directories: - node_modules script: - npm run build - npm test ``` -------------------------------- ### Initializing Flow Configuration Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Initializes Flow in the project by creating a `.flowconfig` file in the root directory. ```bash npm run flow init ``` ```bash yarn flow init ``` -------------------------------- ### Add precommit script to package.json Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Adds a 'precommit' script to the package.json file, which will execute lint-staged before each commit. ```json "scripts": { "precommit": "lint-staged", "start": "react-scripts start", "build": "react-scripts build" ``` -------------------------------- ### npm Test Script Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md The `npm test` command launches the test runner in an interactive watch mode. This allows for continuous running of tests as code changes. ```bash npm test ``` -------------------------------- ### Writing a Basic Jest Test Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Demonstrates how to write a simple unit test using Jest's `it()` and `expect()` functions to test a sum function. It imports the function to be tested and uses `toEqual` matcher for assertion. ```javascript import sum from './sum'; it('sums numbers', () => { expect(sum(1, 2)).toEqual(3); expect(sum(2, 2)).toEqual(4); }); ``` -------------------------------- ### Building for Relative Paths Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This configuration is used to build the jss-app-templates project for deployment when the application is not served from the root directory. It ensures that all asset paths are correctly relative. ```bash npm run build -- --public-url /your-app-name/ ``` -------------------------------- ### Configure API Proxy in package.json Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Set a proxy in your package.json file to forward unknown requests to your API server during development. This avoids CORS issues and simplifies request handling. ```json { "proxy": "http://localhost:4000" } ``` -------------------------------- ### Simplify Tests with jest-enzyme Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Illustrates using `jest-enzyme` to simplify assertions, specifically the `toContainReact` matcher for checking component content. ```js expect(wrapper).toContainReact(welcome) ``` -------------------------------- ### Add CSS build and watch scripts to package.json Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Adds scripts to package.json for building CSS from Sass files and watching for changes. ```diff "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", "test": "react-scripts test --env=jsdom", ``` -------------------------------- ### Project Folder Structure Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md This is the standard folder structure for a project created with create-react-app. Key files like `public/index.html` and `src/index.js` are essential for the build process. Webpack processes files within `src` for faster rebuilds, and any JS/CSS files must be placed inside `src` to be recognized. ```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 ``` -------------------------------- ### Write a Basic Shallow Render Test with Enzyme Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Demonstrates a simple smoke test that shallowly renders the App component without crashing, useful for checking component mounting. ```js import React from 'react'; import { shallow } from 'enzyme'; import App from './App'; it('renders without crashing', () => { shallow(); }); ``` -------------------------------- ### Import Chai and Sinon for Assertions Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Demonstrates how to import third-party assertion libraries like Chai and Sinon if preferred over Jest's built-in matchers. ```js import sinon from 'sinon'; import { expect } from 'chai'; ``` -------------------------------- ### Import Component from Another File in React Source: https://github.com/jflheureux/jss-app-templates/blob/master/react-helix/README.md Shows how to import a React component from a different file using ES6 modules. This facilitates code organization and reusability. ```javascript import React, { Component } from 'react'; import Button from './Button'; // Import a component from another file class DangerButton extends Component { render() { return