Skip to content

Commit

Permalink
docs: migrate website to docusaurus (callstack#76)
Browse files Browse the repository at this point in the history
  • Loading branch information
zamotany authored Aug 31, 2021
1 parent 0238bb8 commit 82bc2f9
Show file tree
Hide file tree
Showing 150 changed files with 15,150 additions and 42,165 deletions.
10 changes: 6 additions & 4 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ jobs:

steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0

- name: Use Node.js 14
uses: actions/setup-node@v1
Expand All @@ -23,15 +25,15 @@ jobs:

- name: Install website dependencies
working-directory: website
run: npm i
run: yarn

- name: Build & export website
- name: Build website
working-directory: website
run: npm run build && npm run export
run: yarn generate && yarn build

- name: Deploy website in preview mode
working-directory: website
run: npx netlify deploy --dir=out --prod
run: yarn netlify deploy --dir=build --prod
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
10 changes: 6 additions & 4 deletions .github/workflows/deploy_pr.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ jobs:

steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0

- name: Use Node.js 14
uses: actions/setup-node@v1
Expand All @@ -23,15 +25,15 @@ jobs:

- name: Install website dependencies
working-directory: website
run: npm i
run: yarn

- name: Build & export website
- name: Build website
working-directory: website
run: npm run build && npm run export
run: yarn generate && yarn build

- name: Deploy website in preview mode
working-directory: website
run: npx netlify deploy --dir=out
run: yarn netlify deploy --dir=build
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
73 changes: 7 additions & 66 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,75 +63,16 @@ __Check the base [`webpack.config.js`](https://github.com/callstack/repack/blob/
- Bundle visualizations
- [ ] [Module Federation](https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669) support

## Why & when

The main feature of Re.Pack is Webpack and its ecosystem of loaders, plugins and support for various features like symlinks, aliases etc. However, because Re.Pack is based on Webpack, it is targeted towards advanced users who already know how to use Webpack and want to leverage Webpack ecosystem.

If you're just starting with React Native, it's better to stick with the default solution — Metro, since you probably won't benefit much from switching to Webpack.

You can read more about design goals and comparisons here: [About Re.Pack](https://github.com/callstack/nativepack/discussions/43)

## Installation & setup

### Compatibility with Webpack

On paper, Re.Pack should work with any version of Webpack 5, but we recommend to consult with the compatibility table below.
The table represents versions of `webpack` for which Re.Pack is confirmed to work correctly.

If you don't see your version, give it a go. If it doesn't work, please open an issue.


| `webpack` | `@callstack/repack` | `@callstack/nativepack`* |
| ---------- | ----------------------- | ------------------------- |
| `5.22.0` | | `1.0.x`, `1.1.x`, `1.2.x` |
| `>=5.29.0` | `2.0.0-beta.x` | `1.2.x`, `1.3.x`, `1.4.x` |

> \* `@callstack/repack` is rebranded `@callstack/nativepack` - they are both the same project.
1. Install necessary dependencies:

```bash
npm i -D webpack terser-webpack-plugin babel-loader @callstack/repack
# or
yarn add -D webpack terser-webpack-plugin babel-loader @callstack/repack
```
2. Create `react-native.config.js` (if it doesn't exists) and paste the following content:
```js
module.exports = {
commands: require('@callstack/repack/commands')
};
```
3. Create `webpack.config.js` based on the [template](https://github.com/callstack/repack/blob/main/templates/webpack.config.js).
4. Configure XCode/Gradle to use `webpack-bundle`/`webpack-start` commands:
- XCode: Add `export BUNDLE_COMMAND=webpack-bundle` to **_Bundle React Native code and images_** phase inside **_Build Phases_** in your project XCode config. The final phase should look similar to:
```bash
export NODE_BINARY=node
export BUNDLE_COMMAND=webpack-bundle
../node_modules/react-native/scripts/react-native-xcode.sh
```
- Gradle: Add `bundleCommand: "webpack-bundle"` setting to `project.ext.react` inside `android/app/build.gradle` file, so it looks similar to:
```groovy
project.ext.react = [
enableHermes: false, // clean and rebuild if changing
bundleCommand: "webpack-bundle",
bundleInDebug: false
]
```
5. Now you can build your app for production or run development server with `npx react-native webpack-start` and develop your app.

## Usage

Once you've completed [Installation & setup](#installation--setup) you can:
## Documentation

- Build your application for production using XCode/Android Studio/Gradle/Fastlane or whichever tool you use.
- Install your application by installing pods + `npx react-native run-ios` or `npx react-native run-android`.
- Develop your application by starting development server with `npx react-native webpack-start`.
- Create JavaScript bundle only by running `npx react-native webpack-bundle --entry-file index.js --bundle-output ./dist/index.bundle --dev=false`.
- Create JavaScript bundle or start development server with Webpack CLI by running `PLATFORM=(ios|android) npx webpack-cli -c webpack.config.js`.
The documentation is available at: https://re-pack.netlify.app/

## Documentation
You can also use the following links to jump to specific topics:

- [API documentation](https://re-pack.netlify.app/)
- [About Re.Pack](https://re-pack.netlify.app/docs/about)
- [Getting Started](https://re-pack.netlify.app/docs/getting-started)
- [Configuration](https://re-pack.netlify.app/docs/configuration/webpack-config)
- [API documentation](https://re-pack.netlify.app/docs/api/index)
- [Known issues & limitations](https://github.com/callstack/nativepack/discussions/44)
- [Code splitting](https://github.com/callstack/nativepack/discussions/45)

Expand Down
2 changes: 1 addition & 1 deletion packages/TesterApp/ios/Podfile
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ target 'TesterApp' do
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
:hermes_enabled => false
)


Expand Down
23 changes: 1 addition & 22 deletions packages/TesterApp/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ PODS:
- FlipperKit/Core
- FlipperKit/FlipperKitNetworkPlugin
- glog (0.3.5)
- hermes-engine (0.7.2)
- libevent (2.1.12)
- OpenSSL-Universal (1.1.180)
- RCT-Folly (2020.01.13.00):
Expand All @@ -71,11 +70,6 @@ PODS:
- boost-for-react-native
- DoubleConversion
- glog
- RCT-Folly/Futures (2020.01.13.00):
- boost-for-react-native
- DoubleConversion
- glog
- libevent
- RCTRequired (0.64.0)
- RCTTypeSafety (0.64.0):
- FBLazyVector (= 0.64.0)
Expand Down Expand Up @@ -133,16 +127,6 @@ PODS:
- React-jsinspector (= 0.64.0)
- React-perflogger (= 0.64.0)
- Yoga
- React-Core/Hermes (0.64.0):
- glog
- hermes-engine
- RCT-Folly (= 2020.01.13.00)
- RCT-Folly/Futures
- React-cxxreact (= 0.64.0)
- React-jsi (= 0.64.0)
- React-jsiexecutor (= 0.64.0)
- React-perflogger (= 0.64.0)
- Yoga
- React-Core/RCTActionSheetHeaders (0.64.0):
- glog
- RCT-Folly (= 2020.01.13.00)
Expand Down Expand Up @@ -365,16 +349,13 @@ DEPENDENCIES:
- FlipperKit/FlipperKitUserDefaultsPlugin (= 0.75.1)
- FlipperKit/SKIOSNetworkPlugin (= 0.75.1)
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- hermes-engine (~> 0.7.2)
- libevent (~> 2.1.12)
- RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
- RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
- RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
- React (from `../node_modules/react-native/`)
- React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`)
- React-Core (from `../node_modules/react-native/`)
- React-Core/DevSupport (from `../node_modules/react-native/`)
- React-Core/Hermes (from `../node_modules/react-native/`)
- React-Core/RCTWebSocket (from `../node_modules/react-native/`)
- React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
- React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
Expand Down Expand Up @@ -407,7 +388,6 @@ SPEC REPOS:
- Flipper-PeerTalk
- Flipper-RSocket
- FlipperKit
- hermes-engine
- libevent
- OpenSSL-Universal
- YogaKit
Expand Down Expand Up @@ -489,7 +469,6 @@ SPEC CHECKSUMS:
Flipper-RSocket: 602921fee03edacf18f5d6f3d3594ba477f456e5
FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
hermes-engine: 7d97ba46a1e29bacf3e3c61ecb2804a5ddd02d4f
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
Expand Down Expand Up @@ -519,6 +498,6 @@ SPEC CHECKSUMS:
Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

PODFILE CHECKSUM: db9303fa982e545eed24361707e3ce71c044d899
PODFILE CHECKSUM: 24c4f862874da50a036ffc0dce1997b2a5bad911

COCOAPODS: 1.10.1
8 changes: 2 additions & 6 deletions packages/TesterApp/ios/TesterApp.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -403,12 +403,10 @@
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-TesterApp/Pods-TesterApp-frameworks.sh",
"${PODS_ROOT}/hermes-engine/destroot/Library/Frameworks/iphoneos/hermes.framework",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down Expand Up @@ -463,12 +461,10 @@
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-TesterApp-TesterAppTests/Pods-TesterApp-TesterAppTests-frameworks.sh",
"${PODS_ROOT}/hermes-engine/destroot/Library/Frameworks/iphoneos/hermes.framework",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down Expand Up @@ -811,7 +807,7 @@
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 i386";
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
Expand Down Expand Up @@ -872,7 +868,7 @@
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 i386";
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_OPTIMIZATION_LEVEL = 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
</Testables>
</TestAction>
<LaunchAction
buildConfiguration = "Debug"
buildConfiguration = "Release"
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
Expand Down
2 changes: 2 additions & 0 deletions packages/repack/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@
"react-native": "^0.64.0",
"release-it": "^14.10.0",
"terser-webpack-plugin": "^5.1.3",
"typedoc": "^0.21.8",
"typedoc-plugin-markdown": "^3.10.4",
"typescript": "^4.1.5",
"webpack": "^5.50.0"
}
Expand Down
11 changes: 11 additions & 0 deletions packages/repack/typedoc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"out": "../../website/docs/api",
"entryPoints": ["./src/index.ts"],
"tsconfig": "./tsconfig.json",
"categoryOrder": ["Webpack Plugin", "Development server", "*"],
"readme": "none",
"name": "Re.Pack APIs",
"excludePrivate": true,
"allReflectionsHaveOwnDocument": true,
"hideBreadcrumbs": true
}
7 changes: 7 additions & 0 deletions website/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
extends: '@callstack/eslint-config/react',
rules: {
'import/no-extraneous-dependencies': 0,
'import/no-unresolved': 0,
},
};
23 changes: 23 additions & 0 deletions website/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Dependencies
/node_modules

# Production
/build

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

docs/api
tmp
4 changes: 4 additions & 0 deletions website/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
"singleQuote": true,
"trailingComma": "es5"
}
25 changes: 25 additions & 0 deletions website/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# Website

This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.

### Installation

```
$ yarn
```

### Local Development

```
$ yarn start
```

This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.

### Build

```
$ yarn build
```

This command generates static content into the `build` directory and can be served using any static contents hosting service.
3 changes: 3 additions & 0 deletions website/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
8 changes: 8 additions & 0 deletions website/blog/2019-05-28-first-blog-post.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
slug: first-blog-post
title: First Blog Post
authors: zamotany
tags: [hola, docusaurus]
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
5 changes: 5 additions & 0 deletions website/blog/authors.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
zamotany:
name: Paweł Trysła
title: Software Developer @ Callstack, Re.Pack creator
url: https://twitter.com/_zamotany
image_url: https://github.com/zamotany.png
Loading

0 comments on commit 82bc2f9

Please sign in to comment.