You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Next, I open up `packages/backpack-core/webpack.config.js` in my editor and make some changes to the webpack configuration focusing on development mode.
35
39
36
-
To try out these local changes, I would need to:
37
-
38
-
- Kill the running example (i.e. `CMD + c`)
39
-
- Rerun it to pickup changes (i.e. `npm run dev`)
40
+
To try out these local changes, I would need to:
40
41
41
-
That's it.
42
+
* Kill the running example (i.e. `CMD + c`)
43
+
* Rerun it to pickup changes (i.e. `npm run dev`)
44
+
45
+
That's it.
42
46
43
47
## Using Lerna
44
48
@@ -47,17 +51,14 @@ When moving between branches, it's a good idea to work with a fresh install.
47
51
In your project's root run the following:
48
52
49
53
```bash
50
-
./node_modules/bin/lerna clean
54
+
./node_modules/bin/lerna clean
51
55
./node_modules/bin/lerna bootstrap
52
56
```
53
57
54
58
This will clean out, reinstall, rebuild, and symlink all of the `examples` and `packages` properly.
55
59
56
-
57
60
## Support
58
61
59
-
- Join the #backpack channel in our public Slack group. Sign up at [https://palmer.chat](https://palmer.chat/)
60
-
- File an issue on GitHub
61
-
- Tweet to or DM [@jaredpalmer](https://twitter.com/jaredpalmer)
62
-
63
-
62
+
* Join the #backpack channel in our public Slack group. Sign up at [https://palmer.chat](https://palmer.chat/)
63
+
* File an issue on GitHub
64
+
* Tweet to or DM [@jaredpalmer](https://twitter.com/jaredpalmer)
HOWEVER, you can configure Backpack to your project's needs by extending [the underlying Webpack 2 configuration](#custom-configuration).
15
+
HOWEVER, you can configure Backpack to your project's needs by extending [the underlying Webpack 2 configuration](#custom-configuration).
16
16
17
17
**PLEASE READ:** If you're thinking of using Backpack with React.js, you should use [Razzle](https://github.com/jaredpalmer/razzle) instead. It is a project purpose-built for SSR React with an almost identical API.
18
18
19
19
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
20
+
20
21
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
*[Building for Production](#building-for-production)
30
+
*[CLI Commands](#cli-commands)
31
+
*[`backpack dev`](#backpack-dev)
32
+
*[`backpack build`](#backpack-build)
33
+
*[FAQ](#faq)
34
+
*[Inspiration](#inspiration)
35
+
*[Authors](#authors)
34
36
35
37
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
36
38
@@ -54,7 +56,7 @@ and add a script to your package.json like this:
54
56
55
57
After that there are just a few ~~conventions~~ defaults:
56
58
57
-
-`src/index.js`: the entry of your app.
59
+
*`src/index.js`: the entry of your app.
58
60
59
61
...actually that's it.
60
62
@@ -64,7 +66,7 @@ You can then run your application in development mode:
64
66
npm run dev
65
67
```
66
68
67
-
Successful builds will show a console like this. *Note: screenshot taken from running the [basic example](https://github.com/palmerhq/backpack/tree/master/examples/basic)*
69
+
Successful builds will show a console like this. _Note: screenshot taken from running the [basic example](https://github.com/palmerhq/backpack/tree/master/examples/basic)_
68
70
<imgsrc="https://cloud.githubusercontent.com/assets/4060187/21944379/eaba2fde-d9a3-11e6-87aa-f30ddc88b5a8.png"width="600"alt="npm run dev">
69
71
70
72
### Custom configuration
@@ -77,13 +79,13 @@ For custom advanced behavior, you can create a `backpack.config.js` in the root
77
79
// You can however use the ES2015 features supported by your Node.js version.
To extend our usage of `babel`, you can define a `.babelrc` file at the root of your app. This file is optional.
105
107
106
-
If found, Backpack will consider it to be the *source of truth*. Thus it must define what Backpack needs as well, which is the `backpack-core/babel` preset.
108
+
If found, Backpack will consider it to be the _source of truth_. Thus it must define what Backpack needs as well, which is the `backpack-core/babel` preset.
107
109
108
110
This is designed so that you are not surprised by modifications we could make to the default `babel` configurations.
109
111
@@ -118,7 +120,7 @@ Here's an example `.babelrc` file:
118
120
}
119
121
```
120
122
121
-
*Note: This works [exactly like Next.js does](https://github.com/zeit/next.js#customizing-babel-config).*
123
+
_Note: This works [exactly like Next.js does](https://github.com/zeit/next.js#customizing-babel-config)._
122
124
123
125
### Building for Production
124
126
@@ -137,20 +139,22 @@ Then run the build command and start your app
137
139
138
140
```bash
139
141
npm run build
140
-
node ./build/main.js
142
+
node ./build/main.js
141
143
```
142
144
143
145
## CLI Commands
144
146
145
147
### `backpack dev`
146
-
Runs backpack in development mode.
147
-
148
+
149
+
Runs backpack in development mode.
150
+
148
151
Your code will reload if you make edits.
149
152
You will see the build errors in the console that look like this.
Builds the app for production to the `build` folder.
155
159
It correctly bundles your production mode and optimizes the build for the best performance.
156
160
@@ -160,9 +164,10 @@ You can run your production application with the following command:
160
164
node ./build/main.js
161
165
```
162
166
163
-
Your application is ready to be deployed!
167
+
Your application is ready to be deployed!
168
+
169
+
_Note: Make sure to add the `build` directory to your `.gitignore` to keep compiled code out of your git repository_
164
170
165
-
*Note: Make sure to add the `build` directory to your `.gitignore` to keep compiled code out of your git repository*
166
171
## FAQ
167
172
168
173
<details>
@@ -173,6 +178,7 @@ Your application is ready to be deployed!
173
178
Yes in that they will all make your life easier.
174
179
175
180
No in that it that Backpack is focused on server-only applications. You should use create-react-app or Next.js for your frontend and then build your backend with Backpack.
181
+
176
182
</details>
177
183
178
184
<details>
@@ -196,11 +202,12 @@ We track V8. Since V8 has wide support for ES6, we don't transpile it. Since V8
Download the example [or clone the whole project](https://github.com/palmerhq/backpack.git):
6
+
5
7
```bash
6
8
curl https://codeload.github.com/palmerhq/backpack/tar.gz/master | tar -xz --strip=2 backpack-master/examples/with-flowtype
7
9
cd with-flowtype
8
10
```
11
+
9
12
Install it and run:
13
+
10
14
```bash
11
15
npm install
12
16
npm run dev
13
17
```
14
18
15
19
## Idea behind the example
16
-
This demonstrates how to add [Flow](https://flowtype.org/) to your Backpack project. Flow is a static type checker that helps you write code
20
+
21
+
This demonstrates how to add [Flow](https://flowtype.org/) to your Backpack project. Flow is a static type checker that helps you write code
17
22
with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.
18
23
19
24
To learn more about Flow, take a look at [its documentation](https://flowtype.org/).
0 commit comments