• Stars
    star
    3,637
  • Rank 11,672 (Top 0.3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 7 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Haul is a command line tool for developing React Native apps, powered by Webpack

Haul

A command line tool for developing React Native apps


Build Status MIT License

PRs Welcome Code of Conduct

Chat tweet


Notice

We're actively working on a Haul successor, which would provide long awaited features like Hot Module Replacement + React Refresh and better feature-parity with Metro. The version 1.0.0 is already released!

If you're investigating using Haul, we highly recommend giving a Re.pack a go.

If you're already using Haul, we recommend migrating to Re.pack for better developer experience and feature set. The migration process is fairly straighforward, since you now have full access to webpack.config.js.


Haul is a drop-in replacement for react-native CLI built on open tools like Webpack. It can act as a development server or bundle your React Native app for production.

@haul-bundler/cli and other packages under @haul-bundler scope are a overhaul of haul package and support only React Native 0.59.0 and above. If you need to support older versions, please check legacy branch.

@haul-bundler/cli and other packages requires Node 10 to be installed. If you're running older version, please upgrade to Node 10 LTS or newer.

Features

  • Replaces React Native packager to bundle your app
  • Access to full webpack ecosystem, using additional loaders and plugins is simple
  • Doesn't need watchman, symlinks work nicely
  • Helpful and easy to understand error messages

Packages

Name Version Description Required
@haul-bundler/cli cli version CLI and commands implementation. Yes
@haul-bundler/core core version Core logic and functionality. Yes (installed with cli)
@haul-bundler/core-legacy core-legacy version Legacy logic from haul package Yes (installed with cli)
@haul-bundler/babel-preset-react-native babel-preset-react-native version Babel preset tweaked for RN 0.59+, which can decrease the bundle size by using only the necessary transforms. Yes (installed by init command)
@haul-bundler/basic-bundle-webpack-plugin basic-bundle-webpack-plugin version Webpack plugin with tweaks for plain JS bundle. Yes (installed with cli)
@haul-bundler/ram-bundle-webpack-plugin ram-bundle-webpack-plugin version Webpack plugin for RAM bundle support. Yes (installed with cli)
@haul-bundler/preset-0.59 preset-0.59 version Preset with configuration tweaked for RN 0.59. Yes (installed by init command when using RN 0.59)
@haul-bundler/preset-0.60 preset-0.60 version Preset with configuration tweaked for RN 0.60. Yes (installed by init command when using RN 0.60)
@haul-bundler/explore explore version Explore and analyse generated bundle No (optional)

Getting started

Start by adding Haul as a dependency to your React Native project (use react-native init MyProject to create one if you don't have a project):

yarn add --dev @haul-bundler/cli

# Traditionalist? No problem:
npm install --save-dev @haul-bundler/cli

To configure your project to use haul, run the following:

yarn haul init
# npm >= 5.2.0 :
npx haul init
# npm < 5.2.0 :
npm install -g npx
npx haul init

This will automatically add the configuration needed to make Haul work with your app, e.g. add haul.config.js to your project, which you can customize to add more functionality.

Next, you're ready to start the development server:

yarn haul start
# Or:
npx haul start

Finally, reload your app to update the bundle or run your app just like you normally would:

react-native run-ios

Documentation

Check out the docs to learn more about available commands and tips on customizing the webpack configuration.

  1. CLI Commands
  2. Configuration
  3. Recipes
  4. Migration guide

Limitations

Haul uses a completely different architecture from React Native packager, which means there are some things which don't work quite the same.

  • Delta Bundles (RN 0.52+) have minimal support
  • Existing react-native commands
  • No support for Hot Module Replacement

The following features are unlikely to be supported in the future:

  • Haste module system: use something like babel-plugin-module-resolver instead
  • Transpile files under node_modules: transpile your modules before publishing, or configure webpack not to ignore them

Made with ❤️ at Callstack

Haul is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥

More Repositories

1

react-native-paper

Material Design for React Native (Android & iOS)
TypeScript
12,242
star
2

linaria

Zero-runtime CSS in JS library
TypeScript
11,195
star
3

react-native-testing-library

🦉 Simple and complete React Native testing utilities that encourage good testing practices.
TypeScript
2,970
star
4

react-native-builder-bob

👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets
JavaScript
2,637
star
5

react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
TypeScript
2,475
star
6

repack

A Webpack-based toolkit to build your React Native application with full support of Webpack ecosystem.
TypeScript
1,330
star
7

react-native-slider

React Native component exposing Slider from iOS and SeekBar from Android
TypeScript
1,118
star
8

reassure

Performance testing companion for React and React Native
TypeScript
1,109
star
9

react-native-ios-kit

The missing React Native UI Kit for iOS
JavaScript
519
star
10

react-theme-provider

A set of utilities that help you create your own React theming system in few easy steps
JavaScript
459
star
11

react-native-fbads

Facebook Audience SDK integration for React Native
Java
434
star
12

super-app-showcase

Monorepository template for super app development with React Native and Re.Pack
JavaScript
352
star
13

react-native-image-editor

A library providing an API for cropping images from the web and the local file system.
Kotlin
340
star
14

react-native-paper-login-template

The easiest way to start with your application.
TypeScript
239
star
15

react-native-brownfield

Set of helpers to make your brownfield integration smooth and easy.
Kotlin
207
star
16

react-native-opentok

React Native OpenTok
Objective-C
203
star
17

component-docs

📝 Simple documentation for your React components
TypeScript
137
star
18

react-native-open-source-board

OSS board with triaged React Native issues.
126
star
19

async-storage

Cross platform storage for React, built on top of AsyncStorage
JavaScript
109
star
20

react-native-material-palette

Bringing Material Palette API to React Native
JavaScript
105
star
21

ts-regex-builder

Maintainable regular expressions for TypeScript and JavaScript.
TypeScript
83
star
22

react-native-multibundle

JavaScript
57
star
23

eslint-config-callstack

ESLint preset extending Flow, Prettier and Jest
JavaScript
52
star
24

repack-examples

Repository with examples for Re.Pack
Java
40
star
25

ai-meeting-transcription

AI Tool for meeting transcriptions
Jupyter Notebook
36
star
26

react-native-socket-mobile

React Native module for the Socket Mobile SDK.
JavaScript
35
star
27

fabric-library-with-custom-cpp-example

Add custom cpp state to your fabric library
Java
29
star
28

hapi-graphql-boilerplate

JavaScript
26
star
29

react-native-detox-example

Example integration of Detox and Jest
Objective-C
23
star
30

super-app-example

This repository presents a compact super-app example from Callstack's blog, illustrating the use of a monorepo structure together with Re.Pack and Module Federation.
Java
21
star
31

web3-react-native-dapp-wagmi

TypeScript
20
star
32

linaria-styled

Zero-runtime CSS in JS library for building React components
18
star
33

parcel-plugin-linaria

Parcel plugin for Linaria (Experimental)
JavaScript
17
star
34

benz-ql

GraphQL server for the Mercedes APIs
JavaScript
16
star
35

generator-node-module

A Yeoman module to author Node libraries with Prettier, Jest, Flow and Babel.
JavaScript
16
star
36

react-native-snapshot-tests

An example of snapshot testing with React Native
Objective-C
16
star
37

delightful-ux-training-app

JavaScript
15
star
38

web3-cross-platform-dapp

TypeScript
13
star
39

universal-react-app

JavaScript
12
star
40

workshop-navigation

Navigation in React Native workshop.
JavaScript
12
star
41

ai-cli

AI assistant in your terminal.
TypeScript
11
star
42

react-native-windows-hello

RNW library providing developer with all Windows Hello features
C++
10
star
43

github-comment-bot

JavaScript
10
star
44

talk-universal-react

JavaScript
8
star
45

news-mini-app-showcase

JavaScript
8
star
46

ReactNativeNotes

Notes demo application showing the abilities of React Native for desktop connected with UWP development
TypeScript
8
star
47

ai-summarization

AI summarization tool
Jupyter Notebook
7
star
48

react-native-releases-script

Script to generate changelog for RN releases
7
star
49

callstack-hackathon-team-ferran

callstack-hackaton-team-ferran
JavaScript
5
star
50

web3-react-native-dapp-viem

TypeScript
4
star
51

callstack-hackathon-team-dratwa-wojtek

JavaScript
3
star
52

reassure-examples

Examples for Reassure setup with different frameworks.
JavaScript
3
star
53

.github

Templates for all Callstack OSS projects
2
star
54

react-native-paper-codemod

JavaScript
2
star
55

AppleVisionBGFX

Usage of BGFX in visionOS
C++
2
star
56

callstack.github.io

Organisation Github Page
HTML
1
star
57

sample-weather-app

JavaScript
1
star
58

workshop-universal-sunshine

Universal React Native & React app based on Sunshine: https://github.com/udacity/Sunshine-Version-2
1
star