Skip to content

Commit 9821cc4

Browse files
committed
docs: update readmes
1 parent 45fe593 commit 9821cc4

File tree

2 files changed

+93
-40
lines changed

2 files changed

+93
-40
lines changed

DEVELOPER.md

Lines changed: 85 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,133 @@
11
# DEVELOPER
22

3-
# Setting up the environment
3+
To build Qwik for local development, first [npm](https://docs.npmjs.com/) (or [yarn](https://yarnpkg.com/)) install the dev dependencies:
44

5-
## Setting up the environment
5+
```
6+
npm install
7+
```
68

7-
> NOTE: This repo is currently in the transition to the `bazel` build system. Only `bazel` developer information is documented here.
9+
Next the `start` command will:
810

9-
The repo uses `bazel` for building. Best way to run `bazel` is with [`bazelisk`](https://github.com/bazelbuild/bazelisk) which will automatically download and execute the right version of `bazel`.
11+
- Build the source files
12+
- Begin the watch process so any changes will rebuild
13+
- Run the type checking watch process with [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html)
14+
- Run the unit test (Jest) watch process
1015

11-
_preferred way_
16+
```
17+
npm start
18+
```
19+
20+
## Running Dev Server Integration Tests
21+
22+
The `integration/` directory is for this local repo's end-to-end and integration testing (and not necessarily app demos). Its dev server is setup to always point to the local build and stay current with the watch process.
23+
24+
First start the integration dev server, which will also ensure a build was completed:
1225

1326
```
14-
brew install bazelisk
27+
npm run integration.server
1528
```
1629

17-
or
30+
Then navigate to http://localhost:8080/
31+
32+
The `npm run integration.server` comands runs the server in `development` mode, where files are not minified, source maps are inlined, and there's additional logging. To run code minified with external source maps and without extra logs, run `npm run integration.server.prod`, which is what the end-to-end tests use.
33+
34+
## Running All Tests
35+
36+
To run all Unit tests ([Jest](https://jestjs.io/)) and E2E/Integration tests ([Cypress](https://www.cypress.io/)), run:
1837

1938
```
20-
npm install -g @bazel/bazelisk
39+
npm test
2140
```
2241

23-
`Bazel` will invoke `Yarn` and manage all dependencies.
42+
The `test` command will also ensure a build was completed.
2443

25-
## `bazel` vs `ibazel`
44+
### Unit Tests Only
2645

27-
The difference between `bazel` and `ibazel` is that `ibazel` will re-invoke `bazel` if any relevant files change. This is useful for constantly updating the server and or tests as they are being developed. All commands are listed as `bazel`, but can be replaced for `ibazel` as needed.
46+
Unit tests use [Jest](https://jestjs.io/).
2847

29-
# Running demos (`integration`)
48+
```
49+
npm run test.unit
50+
```
51+
52+
To keep Jest open with the watch mode, run:
3053

3154
```
32-
bazel run integration:server
55+
npm run test.watch
3356
```
3457

35-
Then open:
58+
> Note that the `test.watch` command isn't necessary if you're running the `npm start` command, since `start` will also concurrently run the Jest watch process.
59+
60+
To debug and step through unit tests, within VSCode you can use the "Integration Dev Server" Debug launch task.
3661

37-
- http://localhost:8080/
62+
### E2E Tests Only
3863

39-
## Running Tests
64+
E2E and Integration tests use [Cypress](https://www.cypress.io/).
4065

41-
All tests:
66+
To run the Cypress tests headless, from start to finish, run:
4267

4368
```
44-
bazel test //...
69+
npm run test.e2e
4570
```
4671

47-
### Unit tests only
72+
To open Cypress in interactive mode and control through a browser, run:
4873

4974
```
50-
bazel test --test_tag_filters=unit //...
75+
npm run test.e2e.open
5176
```
5277

53-
### E2e tests only
78+
## Production Build
5479

55-
Before running the e2e tests, ensure that the `integration` server is running. (`bazel run integration:server`)
80+
The `npm start` command will run development builds, type check, watch unit tests, and watch the files for changes.
81+
82+
A full production build will:
83+
84+
- Builds each submodule
85+
- Generates bundled `.d.ts` files for each submodule with [API Extractor](https://api-extractor.com/)
86+
- Checks the public API hasn't changed
87+
- Builds a minified `core.min.mjs` file
88+
- Generates the publishing `package.json`
5689

5790
```
58-
bazel test --test_tag_filters=e2e //...
91+
npm run build
5992
```
6093

61-
Running cypress manually
94+
The build output will be written to `dist-dev/@builder.io-qwik`, which will be the directory that is published
95+
to [@builder.io/qwik](https://www.npmjs.com/package/@builder.io/qwik).
96+
97+
## Publishing
98+
99+
1. Run `npm run release`
100+
2. Use the [interactive UI](https://www.npmjs.com/package/np) to select the version/tag.
101+
3. The selected version number will become the commit message.
102+
4. After publishing it'll open a prefilled GitHub Releases draft.
103+
5. 🚀
104+
105+
## Bazel
106+
107+
Bazel is currently used for further testing and builds between internal repos. However, it is not required for local development and contribution to Qwik.
108+
109+
### Setting up the Bazel environment
110+
111+
Best way to run `bazel` is with [`bazelisk`](https://github.com/bazelbuild/bazelisk) which will automatically download and execute the right version of `bazel`.
112+
113+
_preferred way_
62114

63115
```
64-
./node_modules/.bin/cypress open
116+
brew install bazelisk
65117
```
66118

67-
## Publishing
119+
or
68120

69121
```
70-
git fetch upstream
71-
git checkout main
72-
git reset --hard upstream/main
73-
# edit src/package.json wtih new version number
74-
VERSION=`node -e 'console.log(require("./src/package.json").version)'`
75-
echo "About to publish v$VERSION"
76-
bazel run src:pkg.publish -- --tag=latest --access=public
77-
git commit -a -m "release: v$VERSION"
78-
git tag v$VERSION
79-
git push upstream main:main v$VERSION
122+
npm install -g @bazel/bazelisk
80123
```
81124

125+
`Bazel` will invoke `Yarn` and manage all dependencies.
126+
127+
### `bazel` vs `ibazel`
128+
129+
The difference between `bazel` and `ibazel` is that `ibazel` will re-invoke `bazel` if any relevant files change. This is useful for constantly updating the server and or tests as they are being developed. All commands are listed as `bazel`, but can be replaced for `ibazel` as needed.
130+
82131
## Pre-submit hooks
83132

84133
The project has pre-submit hooks, which ensure that your code is correctly formatted. You can run them manually like so:

README.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<img alt="Qwik Logo" width="400" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f" />
55
</p>
66

7-
<br />
8-
97
# `Qwik` DOM-Centric, Resumable Web-App Framework
108

119
An Open-Source framework designed for best possible [time to interactive](https://web.dev/interactive/), by focusing on [resumability](https://github.com/BuilderIO/qwik/blob/main/docs/RESUMABLE.md) of server-side-rendering of HTML, and [fine-grained lazy-loading](https://github.com/BuilderIO/qwik/blob/main/docs/LAZY_LOADING.md) of code.
@@ -22,11 +20,17 @@ An Open-Source framework designed for best possible [time to interactive](https:
2220
- [A first look at Qwik - the HTML first framework](https://dev.to/mhevery/a-first-look-at-qwik-the-html-first-framework-af)
2321
- [Death by Closure (and how Qwik solves it)](https://dev.to/mhevery/death-by-closure-and-how-qwik-solves-it-44jj)
2422

23+
## Development
24+
25+
- See [Developer.md](https://github.com/BuilderIO/qwik/blob/main/DEVELOPER.md) for more information on how to build Qwik from the source and contribute!
26+
2527
## Community
2628

27-
Join our [discord](https://discord.gg/JHVpZmqSs4) community.
29+
- Ping us at [@QwikDev](https://twitter.com/QwikDev)
30+
- Join our [Discord](https://discord.gg/JHVpZmqSs4) community.
31+
32+
---
2833

29-
<hr />
3034
<p align="center">
3135
Made with ❤️ by <a target="_blank" href="https://www.builder.io/">Builder.io</a>
3236
</p>

0 commit comments

Comments
 (0)