Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-cra-v2

My playground on create-react-app v2 with Netlify
https://github.com/willnguyen1312/awesome-cra-v2

Last synced: 2 days ago
JSON representation

Making a Progressive Web App
- Why Opt-in?
- Offline-First Considerations
  - let the user know
Available Scripts
- `npm start`
  - http://localhost:3000
Adding a Stylesheet
- With React Router
  - Webpack
- `Button.js`
  - here
Supported Browsers
- Supported Language Features
Syntax Highlighting in the Editor
- Supported Language Features
  - relevant Babel documentation page
Debugging in the Editor
- Visual Studio Code
  - troubleshooting guide
  - VS Code - for-chrome) installed.
- WebStorm
  - WebStorm - ide-support/hmhgeddbohgjknpmjagkdomcpobmllji) Chrome extension installed.
Formatting Code Automatically
- WebStorm
Changing the Page `<title>`
- WebStorm
  - `document.title` - helmet), a third party library.
Importing a Component
- `DangerButton.js`
  - Understanding ES6: Modules
Adding a CSS Modules Stylesheet
- `Button.js`
  - here
Post-Processing CSS
- Result
  - `all` property - break-3/#breaking-controls), [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), and [media query ranges](https://www.w3.org/TR/mediaqueries-4/#range-context) are automatically polyfilled to add support for older browsers.
  - CSS Grid Layout
Adding Bootstrap
- When to Use the `public` Folder
  - reactstrap
  - `App.js`
- Using a Custom Theme
  - Bootstrap's documentation
Using the `public` Folder
- When to Use the `public` Folder
  - `manifest.webmanifest`
  - `pace.js`
Adding Flow
- Using a Custom Theme
Adding a Router
- Using a Custom Theme
  - React Router
  - Basic Example
Can I Use Decorators?
- Adding Development Environment Variables In `.env`
  - decorators
  - #214
  - #411
Fetching Data with AJAX Requests
- Adding Development Environment Variables In `.env`
  - here
  - here - US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and `fetch()` use Promises under the hood. You can also use the [`async / await`](https://davidwalsh.name/async-await) syntax to reduce the callback nesting.
  - `fetch()` API - US/docs/Web/JavaScript/Reference/Global_Objects/Promise) are available in your target audience's browsers.
  - the FAQ entry on the React website
  - polyfill
Integrating with an API Backend
- API Platform (PHP and Symfony)
  - this tutorial
Proxying API Requests in Development
- "Invalid Host Header" Errors After Configuring Proxy
  - this article - dev-server/issues/887).
  - described here
Pre-Rendering into Static HTML Files
- Configuring the Proxy Manually
  - zero-configuration pre-rendering (also called snapshotting) here
  - react-snapshot - snap](https://github.com/stereobooster/react-snap) to generate HTML pages for each route, or relative link, in your application. These pages will then seamlessly become active, or “hydrated”, when the JavaScript bundle has loaded.
Injecting Data from the Server into the Page
- Configuring the Proxy Manually
  - sanitize the JSON before sending it to the client
Running Tests
- Command Line Interface
  - Jest watch mode
- Testing Components
  - extensively documented here
- On CI servers
  - this article
  - Customize your Travis CI Build
- Disabling jsdom
  - `ReactDOM.render()`
  - `TestUtils.createRenderer()`
- Editor Integration
  - VS Code Jest Preview
- Configuring the Proxy Manually
  - Jest - 15.html) of Jest so if you heard bad things about it years ago, give it another try.
- Writing Tests
  - `jest.fn()` and `expect(fn).toBeCalled()`
- Coverage Reporting
  - `snapshotSerializers`
- Snapshot Testing
  - Read more about snapshot testing.
Debugging Tests
- Editor Integration
  - Visual Studio Code
- Debugging Tests in Visual Studio Code
  - `launch.json`
Analyzing the Bundle Size
- Progressive Web App Metadata
  - Source map explorer
Deployment
- Serving Apps with Client-Side Routing
  - `pushState` history API - router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
  - Apache HTTP Server
- [GitHub Pages](https://pages.github.com/)
  - Read more
  - https://myusername.github.io/my-app
- Building for Relative Paths
  - here
- Customizing Environment Variables for Arbitrary Build Environments
  - env-cmd
- [Azure](https://azure.microsoft.com/)
  - this
  - this - appservice-static) repo for a way to use automatic deployment to Azure App Service.
- [Firebase](https://firebase.google.com/)
- [Heroku](https://www.heroku.com/)
  - Deploying React with Zero Configuration
- [Netlify](https://www.netlify.com/)
  - Start a new netlify project
- [Now](https://zeit.co/now)
  - this article.
- [Surge](https://surge.sh/)
  - ensures that every URL falls back to that file
- Other Solutions
  - Node
Advanced Configuration
- [Surge](https://surge.sh/)
  - send a pull request to detect your editor of choice
  - `NODE_PATH` in Node.js
Troubleshooting
- `npm test` hangs or crashes on macOS Sierra
- `npm run build` exits too early
  - adding some swap space
- Moment.js locales are missing
  - Moment.js - locale-support).
- `npm start` doesn’t detect changes
Displaying Lint Output in the Editor
- Supported Language Features
  - Prettier
Updating to New Releases
- changelog
Adding a Sass Stylesheet
- Result
  - not inherit
Sending Feedback
- your feedback
Adding Custom Environment Variables
- Adding Development Environment Variables In `.env`
  - accidentally exposing a private key on the machine that could have the same name

Programming Languages

HTML 4 JavaScript 2

Categories

Deployment 31 Running Tests 11 Troubleshooting 10 Supported Browsers 9 Fetching Data with AJAX Requests 5 Making a Progressive Web App 4 Adding Flow 3 Formatting Code Automatically 3 Can I Use Decorators? 3 Debugging in the Editor 3 Adding Bootstrap 3 Debugging Tests 2 Adding a Stylesheet 2 Proxying API Requests in Development 2 Adding a Router 2 Advanced Configuration 2 Using the `public` Folder 2 Pre-Rendering into Static HTML Files 2 Post-Processing CSS 2 Adding Custom Environment Variables 1 Importing a Component 1 Analyzing the Bundle Size 1 Changing the Page `<title>` 1 Injecting Data from the Server into the Page 1 Adding a CSS Modules Stylesheet 1 Syntax Highlighting in the Editor 1 Updating to New Releases 1 Sending Feedback 1 Integrating with an API Backend 1 Displaying Lint Output in the Editor 1 Adding a Sass Stylesheet 1 Available Scripts 1

Sub Categories

[Firebase](https://firebase.google.com/) 18 Supported Language Features 11 Adding Development Environment Variables In `.env` 9 Using a Custom Theme 6 WebStorm 5 `npm start` doesn’t detect changes 5 When to Use the `public` Folder 4 Configuring the Proxy Manually 4 Result 3 `npm test` hangs or crashes on macOS Sierra 3 [Surge](https://surge.sh/) 3 Why Opt-in? 3 [GitHub Pages](https://pages.github.com/) 2 Disabling jsdom 2 On CI servers 2 Visual Studio Code 2 `Button.js` 2 "Invalid Host Header" Errors After Configuring Proxy 2 Editor Integration 2 Serving Apps with Client-Side Routing 2 [Azure](https://azure.microsoft.com/) 2 [Heroku](https://www.heroku.com/) 1 Offline-First Considerations 1 Debugging Tests in Visual Studio Code 1 Coverage Reporting 1 Moment.js locales are missing 1 Other Solutions 1 Writing Tests 1 Building for Relative Paths 1 API Platform (PHP and Symfony) 1 With React Router 1 Testing Components 1 Snapshot Testing 1 Command Line Interface 1 `DangerButton.js` 1 `npm run build` exits too early 1 [Netlify](https://www.netlify.com/) 1 [Now](https://zeit.co/now) 1 Progressive Web App Metadata 1 `npm start` 1 Customizing Environment Variables for Arbitrary Build Environments 1

Keywords

yaml 2 vue 2 typescript 2 scss 2 printer 2 prettier 2 markdown 2 less 2 jsx 2 json 2 javascript 2 html 2 graphql 2 formatter 2 flow 2 css 2 ast 2 angular 2