GithubHelp home page GithubHelp logo

gaearon / awesome-create-react-app Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tuchk4/awesome-create-react-app

17.0 4.0 6.0 10 KB

Awesome list of Create React App articles / tutorials / videos and FAQ

awesome-create-react-app's Introduction

Awesome Create React App

A collection of awesome things regarding Create React App ecosystem.

Please feel free to file an issue or suggest articles, videos and other useful resources via Pull Requests.

Create React App General Resources

Most discussed / interested issues

Tools

Articles

Video tutorials

Alternatives

FAQ

How to use env config

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_. These environment variables will be defined for you on process.env. For example, having an environment variable named REACT_APP_SECRET_CODE will be exposed in your JS as process.env.REACT_APP_SECRET_CODE, in addition to process.env.NODE_ENV

To define permanent environment variables, create a file called .env in the root of your project

How to use multiple env configs

Right now it is possible installing dotenv and updating npm scripts:

"scripts": {
  "start": "node -r dotenv/config ./node_modules/.bin/react-scripts start dotenv_config_path=development.env",
  "build": "node -r dotenv/config ./node_modules/.bin/react-scripts build dotenv_config_path=production.env"
}

There is the feature request with implemented Pull Request - Support different env configs:

Read different .env configs according to current command (start / test / build).

  • Read dev.env when npm start and npm test
  • Read prod.env when npm run build

By default (if custom config does not exist) read env variables from .env file.

How to change dev server port

Add PORT env variable. Use cross-env to set environment variables across platforms.

"scripts": {
  "start": "cross-env PORT=9001 react-scripts start"
}

If you use .env config - just add PORT variable:

PORT=9001

How to setup root dir for require (webpack module.resolveDirectory analog)?

Official solution: create node_modules at src directory - src/node_modules as official solution for absolute imports #1065

Another way - use NODE_PATH env variable. It is a directory name to be resolved to the current directory as well as its ancestors, and searched for modules. It is resolve.modulesDirectories for webpack. More details at node official documentation "Loading from the global folders"

"scripts": {
  "start": "cross-env NODE_PATH=src/scripts react-scripts start"
}

If you use .env config - just add NODE_PATH variable:

NODE_PATH=src/scripts

How to use custom babel presets

Create React App doesn’t support decorator syntax at the moment.

There are PR Adding support for custom babel configuration #1357. If PR is merged then these features will be available:

@dan_abramov wrote:

So we do not recommend to use babel presets besides the babel-preset-react-app that is already configured at Create React App.

How to change webpack config?

How to add custom webpack plugins?

"scripts": {
  "build:custom": "node scripts/webpack"
}
// scripts/webpack.js
const webpack = require('react-scripts/node_modules/webpack');
const craWebpackConfig = require('react-scripts/config/webpack.config.prod');
const OfflinePlugin = require('offline-plugin');

const config = {
  ...craWebpackConfig,
  plugins: [
     ...craWebpackConfig.plugins,
     new OfflinePlugin()
  ]
};

webpack(config).run(function(err, stats) {
  if (err !== null) {
    console.log('done');
  } else {
    console.log(err);
  }
});

NOTE: There is just webpack config extending, not react-scripts build. There is not beautiful console logs, comparison of the build size and other react-scitpts build command features.

Such approach (workaround) also helps to resolve problems when need to build/pubish a single component. There is the related issue - How to publish components without ejecting #796. Just override webpack entry point and output.

Always remember that using not usual loaders (like yaml, markdown, dsv loaders etc.), additional plugins and features from drafts and proposals makes your application more complex, maybe with dead syntax features and it is become impossible to migrate from current webpack configuration.

awesome-create-react-app's People

Contributors

tuchk4 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.