Giter Club home page Giter Club logo

haul's Introduction

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! 🔥

haul's People

Contributors

acoates-ms avatar appden avatar chaseholland avatar czystyl avatar dave-irvine avatar dratwas avatar grabbou avatar grahamlyus avatar greg-dove avatar hedgepigdaniel avatar jamesgeorge007 avatar jukben avatar kerumen avatar krizzu avatar mathieudutour avatar ndelangen avatar orta avatar satya164 avatar simka avatar singingwolfboy avatar skellock avatar ss18 avatar statm avatar stevefan1999-personal avatar tazsingh avatar thymikee avatar tido64 avatar tmaszko avatar traviskn avatar zamotany avatar

Stargazers

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

Watchers

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

haul's Issues

Doesn't work on Node 4.x

I tried running haul with v4.6.1 of node and it failed (ReferenceError: regeneratorRuntime is not defined), but with v6 it works. The readme should indicate the minimum required version.

Setup meta

There's a couple of features we have to implement before open sourcing this repository.

Here's the list:

  • Add Contributing.md guide
  • Specify issue template
  • List all contributors in package.json
  • Fix git urls in package.json
  • Go over closed issues and make sure they are readable

I am not feeling comfortable with early commits that happened to this repository (development, fast iteration, short messages, small issues), but I want to keep list of contributions and history.

Fix require('*.png')

Need custom plugin that will replace module requires and manually call AssetsRegistry. To be done today/tomorrow.

Alpha 1.0

This is an umbrella issue to figure out what we need to ship 1.0 out.

Ideally, it would be great if we could ship it next week. There's a couple of folks I wanted to invite for alpha testing.

Looking forward to what you think

Contact npm support to acquire the name

As discussed on Slack, the name might be acquireable via npm support.

@satya164 do you know what steps / procedures we should follow?

Note from self: I've contacted the owner via email, but he doesn't seem to answer.

Until we fix it, we can go with haul-cli

fetch is not a function. (In 'fetch', 'fetch' is undefined)

Current Behavior

After running an existing RN project with haul, I get the error visible in screenshot below
capture d ecran 2017-04-01 a 17 52 02

Expected Behavior

I expected fetch to be accessible in global like when running with packager:
https://github.com/facebook/react-native/blob/master/packager/defaults.js#L41-L44
https://github.com/facebook/react-native/blob/master/Libraries/Core/InitializeCore.js#L176-L186

Haul Configuration (webpack.haul.js)

The generated haul config:
module.exports = ({ platform }) => ({ entry: ./index.${platform}.js, });

Your Environment

software version
Haul ^0.1.4
react-native ^0.42.0
node v7.5.0
npm or yarn 4.1.2

Update eslint config

Current eslint config enforces patterns that are not complying with prettier. Can we somehow normalise them in a sense that running prettier doesn't trigger any warnings?

I believe we only need few eslint rules to enforce general design patterns as styling is covered already.

Don't clear() terminal too often

As discussed on Slack, we should only clear() terminal for long-running commands - like server. There are few places where we shouldn't do it, like printing there was problem with passed option.

We have to remove those calls.

Unhandled 'error' event when running `yarn run haul start -- --platform ios`

Current Behavior

I get the error when running yarn run haul start -- --platform ios

events.js:163
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE 127.0.0.1:8081
at Object.exports._errnoException (util.js:1034:11)
at exports._exceptionWithHostPort (util.js:1057:20)
at Server._listen2 (net.js:1265:14)
at listen (net.js:1301:10)
at doListening (net.js:1416:7)
at _combinedTickCallback (internal/process/next_tick.js:83:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:607:11)
at run (bootstrap_node.js:423:7)
at startup (bootstrap_node.js:147:9)
error Command failed with exit code 1.

Expected Behavior

It should run w/o errors.

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }) => ({
entry: ./index.${platform}.js,
});

Your Environment

I'm running on a macbook and trying to run this react-native + redux project.

software version
Haul 0.21.3
react-native 0.42.3 (2.0.1 for the react-native-cli)
node v7.8.0
npm or yarn 4.2.0 (0.21.3 for yarn)

Display proper stack traces in Webpack log

Currently we only print either Failed to compile or Compiled with warnings. We should write a proper printer of Webpack error messages. I am thinking we might do just what create-react-app is doing here.

Enable sourcemaps generation

From my experience, there seems to be something wrong with the built-in source maps generated by Webpack devtool (regardless of the choice).

There are numerous reports on Github that source maps are broken, so it has to be checked.

Don't transpile node_modules

Transpile only react-native, react-native-* (compatibility). Make it easy for user to specify a list (via webpack.config?)

Code splitting & OTA

How to separate js bundle into framework bundle and user code bundle?
and then ,When we publish a single file to user's cell phone ,We Just need combine a single file to the base bundle.

Global vs local installation

I was writing readme installation steps and started wondering which type of installation we should allow.

Currently haul can be installed either globally or locally (doesn't matter to it), which is quite convinient.

In the readme, I demonstrate global installation because it's annoying to write ./node_modules/.bin/haul all over again.

Shall we stick to that or introduce something else, like react-native-cli does by calling into node_moduels?

I am in favor of mimimal setup.

Doesn't work on iOS < 10

Current Behavior

On a fresh react-native init/haul init, without changing any settings, and using the iOS 9.2 Simulator, I get the following:
image

Expected Behavior

I expect that it should work as it does on iOS >= 10.

Haul Configuration (webpack.haul.js)

It's the default configuration. This is on first run.

Your Environment

software version
Haul 0.1.2
react-native 0.42.3
node 7.7.4
yarn 0.23.0

Setup CircleCI

Need to set up CircleCI to build all pull requests and master.

Make output of Webpack nicer

Currently it doesn't print anything, what we need is kinda:

  1. Request for .... reached
  2. Compiling
  3. Served
  4. Bundle done in: XXX ms kind of thing

Add package.json scripts during init

Should check if no start script exists or it is the default React Native one, then prompt to add/replace it during init.

Otherwise prompt and add a script called haul

Image upload

The purpose of this issue is to upload and keep track of all images used in various docs

Can't debug at http://localhost:8081/debugger-ui

I can't access my source files to debug on my project build with haul
image

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }) => ({
  entry: `./index.${platform}.js`,
});

Your Environment

MAC OSX

software version
Haul 0.1.3
react-native 0.42.3
node 6.9.1
npm or yarn v0.19.1

image
image

Figure out multiple configs passed to compiler

Currently we create an array of configs, one for each platform. We used to pass that array to webpack compiler, but switched to passing a single one (current platform you are building) for performance reasons.

When Webpack compiler receives an array of configs, it enters multi-config mode and handles them all w/o restarting. That allows us to serve all platform bundles at the same time, just like packager.

Unfortunately, it has a couple of limitations:

  • It builds all configs at once
  • It recompiles all configs at once, even if one bundle didn't change
  • It's sync - android gets build after ios
  • Default devMiddleware waits for all builds to finish, even if you requested ios. That means you wait for 20 seconds even if iOS was ready after 5 seconds
  • All bundles are built w/o waiting for a request (no lazy option)

All the above makes the development time significantly slower for a very specific use-case (having two simulators open at the same time). However, that use-case is important and we need to support it in a better way.

I'll chat with Webpack team to understand how it works currently, if we are correct and how to fix that. Generally speaking, we might need to write our own dev middleware that does these things.

A solution would be to add a feature to bundle lazily as soon as you request platform bundle. That means we wouldn't bundle android until you load Genymotion and request it. However, as I said above, currently turning on lazy option has two issues:

  • It is lazy for all configs - if you request ios, android also gets built
  • When lazy is turned on, watch doesn't work (recompile on file change)

Current solution requires passing --platform flag.

This is very important to sort out now as it's going to be an important workflow detail - whether to pass platform flags or not.

`haul init` command

Should generate webpack.haul.js by determining the entry file. If index.ios.js or index.android.js exist, it should generate config with platform, if only index.js exists, it should generate config without platform. Should prompt to select the entry file from a list of js files in the directory if neither found (maybe have a limit of 5 files and fallback to an input if more than 5 files)

Nice debugger frontend

We have our own debugger and its frontend. That gives us great opportunity to make it nice.

Ideas welcome.

I am myself in favor of Zeit-like branding with monotype font faces.

Add `jest` unit tests

We need to test the code where it makes sense. Add jest, plug it in into our existing pipeline and add few tests (just to demonstrate how it should be done).

The bundle file size is 6.6M And The sourceMap is 5M

Hi

I'm running three kinds of command to build bundle file.

haul bundle --platform ios --bundle-output build/index.bundle --assets-dest build/assets  --dev false

The file size is 6M.

haul bundle --platform ios --bundle-output build/index.bundle --assets-dest build/assets --minify true --dev false

The file size is 6.6M.

react-native bundle --entry-file index.ios.js --bundle-output ./build/index.rn.bundle --platform ios --dev false 

The file size is 576K.

I opened the haul's bundle file ,When I deleted the sourceMap code ,the file size reduced to 1.5M

Could you add any option which can split the sourceMap to another file?

Implement `cli` options validation

As suggested in one of recent pull requests, it would be great to have the ability to test the options we are passing with a validate function and be able to return an Error if such validation fails.

I'll work on that and also, extract cli.js to utils/makeCli.js as eventually I want it to leave in a separate module (I tend to reuse that infrastructure quite a bit)

Get HMR running

Get HMR up & running. If supported by default, we should make a flag --hot on a CLI. I believe that switch from Dev Tools is rather useless. All in all, you don't want to change it during development.

Eventually we might want to change dev tools in Simulator as well (given that it's been recently allowed), but we will see.

Transpile on build

React Native supports Node >= 4, according to its package.json:

  "engines": {
    "node": ">=4"
  },

We are running latest Node which makes it possible to use ES2015+ features w/o transpiling first. We need a build step that will compile code to Node 4.x (there's preset somewhere I believe).

In dev mode, let's call CLI via cli/index.js which contains requireHook. Production builds should use cli/cli which doesn't have it.

This is done for speed (see how slow is current CLI)

Any attempt to open the debugger throws a NetworkOnMainThread exception

I apologize because I don't have a solid repro other than running my project, but I have narrowed it down to Haul because switching back to the react-native packager allows the app to function properly.

Current Behavior

When connecting to the remote debugger, the app crashes with a NetworkOnMainThreadException:

E/AndroidRuntime: FATAL EXCEPTION: main
                  Process: com.hubspot.android.debug, PID: 13213
                  android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@bdb46cb -- permission denied for window type 2003
                      at android.view.ViewRootImpl.setView(ViewRootImpl.java:703)
                      at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:342)
                      at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:93)
                      at android.app.Dialog.show(Dialog.java:322)
                      at com.facebook.react.devsupport.DevSupportManagerImpl.showProgressDialog(DevSupportManagerImpl.java:808)
                      at com.facebook.react.devsupport.DevSupportManagerImpl.reloadJSFromServer(DevSupportManagerImpl.java:813)
                      at com.facebook.react.devsupport.DevSupportManagerImpl.handleReloadJS(DevSupportManagerImpl.java:648)
                      at com.facebook.react.ReactInstanceManager$3$1.run(ReactInstanceManager.java:420)
                      at android.os.Handler.handleCallback(Handler.java:751)
                      at android.os.Handler.dispatchMessage(Handler.java:95)
                      at android.os.Looper.loop(Looper.java:154)
                      at android.app.ActivityThread.main(ActivityThread.java:6119)
                      at java.lang.reflect.Method.invoke(Native Method)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

To compound this problem, because the debugger tries to auto-reconnect, the only way to get the app to work is to uninstall and reinstall, otherwise this will get triggered on every launch.

Expected Behavior

I should be able to open the chrome debugger

Haul Configuration (webpack.haul.js)

module.exports = ({ platform }, { resolve }) => ({
  entry: `./index.${platform}.js`,
  resolve: Object.assign(resolve, {
    alias: Object.assign({
      Immutable: 'immutable'
    }, resolve.alias || {}, myAliases)
  })
});

Your Environment

software version
Haul latest
react-native 0.43.0
node 7.8.0
npm or yarn yarn 0.21.3

`haul bundle` command

We should support bundle command just like packager, so it can be used with gradle and xcode to build assets.

Clearing console makes it impossible to debug webpack config

Current Behavior

Any console.logs in webpack.haul.js are cleared immediately

Expected Behavior

Debugging the webpack config should be possible. At the moment there's no way to check if, say for example, you're extending the default config, the output object is actually what you want it to be.

Possibly a --no-clear option would be helpful, default to the clean console approach but allow override if necessary? I'd be happy to take care of this if you're looking for a PR

Your Environment

software version
Haul 0.2.1
react-native 0.42.3
node 7.7.4
npm or yarn yarn 0.21.3

Feature Request: --platform windows

Current Behavior

I use React Native for Windows and would love if --platform windows was a thing I could use :)

Expected Behavior

--platform windows runs and compiles code in my .windows.tsx files

Your Environment

software version
Haul 0.2.1
react-native 0.43.1
node 7.7.1
npm or yarn 0.21.3

Mock unsupported commands

React Native has more commands and eventually we want to write faster and better alternatives for each of them.

Until we have them all, users may automatically try to call haul run-ios when it's not implemented yet. We don't want to implicitly call into react-native as it's a different DX.

I think we can create an empty structure for every command that prints out We are working on supporting this command, call react-native ${command} instead for now kind of thing.

Should be good first task.

Logo and branding

I've already shared some ideas on Slack. Would be great to decide on the direction so that we have proper branding in place before setting up docs.

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.