Skip to content

Commit 4990299

Browse files
roedoejetroedoejet
authored
Merge pull request #228 from ReadAlongs/main
release 1.1.1 to have all assets built automatically the standard way
2 parents 4d6db7e + 2c30289 commit 4990299

File tree

72 files changed

+18064
-14992
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+18064
-14992
lines changed

‎.github/workflows/end-to-end-tests.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: End-to-end tests
1+
name: Run tests
22
on: [push]
33
jobs:
44
test-suites:
@@ -30,5 +30,5 @@ jobs:
3030
- name: Check that i18n and l10n are up to date
3131
run: |
3232
npx nx extract-i18n studio-web
33-
if diff -w <(git show HEAD:packages/studio-web/src/i18n/messages.json | sort) <(sort < packages/studio-web/src/i18n/messages.json); then echo OK: The i18n database is up to date.; else echo ERROR: The i18n database is out of date.; npx nx check-fr-l10n studio-web || echo ERROR: The fr l10n database is also out of date.; false; fi
34-
if npx nx check-fr-l10n studio-web; then echo OK: The fr l10n database is up to date.; else echo ERROR: The fr l10n database is out of date.; false; fi
33+
if diff -w <(git show HEAD:packages/studio-web/src/i18n/messages.json | sort) <(sort < packages/studio-web/src/i18n/messages.json); then echo OK: The i18n database is up to date.; else echo ERROR: The i18n database is out of date.; npx nx check-l10n studio-web || echo ERROR: The l10n databases are also out of date.; false; fi
34+
if npx nx check-l10n studio-web; then echo OK: The l10n databases are up to date.; else echo ERROR: An l10n database is out of date.; false; fi

‎.github/workflows/preview.yml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# .github/workflows/preview.yml
2+
name: Deploy PR previews
3+
concurrency: preview-${{ github.ref }}
4+
on:
5+
pull_request:
6+
types:
7+
- opened
8+
- reopened
9+
- synchronize
10+
jobs:
11+
deploy-preview:
12+
runs-on: ubuntu-latest
13+
steps:
14+
- uses: actions/checkout@v3
15+
- name: Use Node.js 16
16+
uses: actions/setup-node@v3
17+
with:
18+
node-version: "16"
19+
- name: Install
20+
run: |
21+
# The default config is for the monorepo, while this is for standalone
22+
npm install
23+
- name: Build web-component
24+
run: |
25+
npx nx build web-component
26+
# create the bundles required for studio-web
27+
npx nx bundle web-component
28+
- name: Build
29+
run: |
30+
npx nx build studio-web --base-href=/pr-preview/pr-${{github.event.number}}/ --configuration=production
31+
npx nx build studio-web --base-href=/pr-preview/pr-${{github.event.number}}/ --configuration=production --localize=fr --deleteOutputPath=false
32+
npx nx build studio-web --base-href=/pr-preview/pr-${{github.event.number}}/ --configuration=production --localize=es --deleteOutputPath=false
33+
- name: Publish Deploy Preview 🛫
34+
uses: rossjrw/pr-preview-action@v1
35+
with:
36+
source-dir: dist/packages/studio-web
37+
preview-branch: gh-pages
38+
umbrella-dir: pr-preview
39+
action: auto

‎.github/workflows/publish.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ jobs:
2222
run: |
2323
npx nx build web-component
2424
# create the bundles required for studio-web
25-
npx nx prepublish web-component
2625
npx nx bundle web-component
2726
- name: Test
2827
run: |
@@ -31,8 +30,11 @@ jobs:
3130
run: |
3231
npx nx build studio-web --configuration=production
3332
npx nx build studio-web --configuration=production --localize=fr --deleteOutputPath=false
33+
npx nx build studio-web --configuration=production --localize=es --deleteOutputPath=false
3434
- name: Deploy 🚀
35-
uses: JamesIves/github-pages-deploy-action@v4.2.3
35+
uses: JamesIves/github-pages-deploy-action@v4
3636
with:
3737
branch: gh-pages # The branch the action should deploy to.
3838
folder: dist/packages/studio-web # The folder the action should deploy.
39+
force: false # rebase instead of force push by default
40+
clean-exclude: pr-preview/ # don't delete pr previews

‎.github/workflows/release.yml‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ jobs:
1111
build:
1212
runs-on: ubuntu-20.04
1313
steps:
14-
- uses: actions/checkout@v2
14+
- uses: actions/checkout@v3
1515
- uses: fregante/setup-git-user@v1
1616
# Setup .npmrc file to publish to npm
1717
- uses: actions/setup-node@v3
@@ -31,7 +31,7 @@ jobs:
3131
command: npx nx test:once web-component
3232
- run: cd ./packages/web-component && npm version patch
3333
- run: cd ./packages/ngx-web-component && npm version patch
34-
- run: npx nx build web-component && npx nx prepublish web-component && npx nx bundle web-component && npx nx build ngx-web-component
34+
- run: npx nx build web-component && npx nx bundle web-component && npx nx build ngx-web-component
3535
- run: |
3636
cd dist/packages/web-component && npm publish --access=public
3737
env:
@@ -43,27 +43,30 @@ jobs:
4343
- name: Determine tag
4444
id: determine_tag
4545
run: |
46-
echo "::set-output name=TAG_VERSION::$(npm view @readalongs/web-component version)"
46+
echo "TAG_VERSION=$(npm view @readalongs/web-component version)" >> $GITHUB_OUTPUT
4747
- name: Bump version and push tag
4848
id: tag_version
49-
uses: mathieudutour/github-tag-action@v5.5
49+
uses: mathieudutour/github-tag-action@v6.1
5050
with:
5151
github_token: ${{ secrets.GITHUB_TOKEN }}
5252
custom_tag: ${{ steps.determine_tag.outputs.TAG_VERSION }}
5353
- name: Create a GitHub release
54-
uses: actions/create-release@v1
54+
uses: ncipollo/release-action@v1
5555
env:
5656
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
5757
with:
58-
tag_name: ${{ steps.tag_version.outputs.new_tag }}
59-
release_name: Release ${{ steps.tag_version.outputs.new_tag }}
58+
tag: ${{ steps.tag_version.outputs.new_tag }}
59+
name: Release ${{ steps.tag_version.outputs.new_tag }}
6060
body: ${{ steps.tag_version.outputs.changelog }}
61-
- name: Commit bumped version and merge with main
62-
run: |
63-
git add package.json packages/*/package.json packages/studio-web/src/assets/bundle.js packages/studio-web/src/assets/fonts.b64.css
64-
git commit -m "chore: commit version"
65-
git fetch --unshallow
66-
git push origin release
67-
git checkout main
68-
git merge release
69-
git push origin main
61+
- name: Submit a PR for the bumped version
62+
uses: peter-evans/create-pull-request@v4
63+
with:
64+
commit-message: "chore: commit version"
65+
delete-branch: true
66+
base: main
67+
add-paths: |
68+
package.json
69+
package-lock.json
70+
packages/*/package.json
71+
packages/studio-web/src/assets/bundle.js
72+
packages/studio-web/src/assets/fonts.b64.css

‎README.md‎

Lines changed: 68 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# ReadAlongs Web App Suite
22

3+
[![Publish Status](https://github.com/readalongs/Web-Component/actions/workflows/publish.yml/badge.svg?branch=main)](https://github.com/ReadAlongs/Web-Component/actions)
4+
[![Test Status](https://github.com/readalongs/Web-Component/actions/workflows/end-to-end-tests.yml/badge.svg?branch=main)](https://github.com/ReadAlongs/Web-Component/actions)
5+
[![GitHub license](https://img.shields.io/github/license/ReadAlongs/Web-Component)](https://github.com/ReadAlongs/Web-Component/blob/main/LICENSE)
6+
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg)](https://github.com/ReadAlongs/Web-Component)
7+
[![web-component release](https://img.shields.io/npm/v/@readalongs/web-component)](https://www.npmjs.com/package/@readalongs/web-component)
8+
[![ngx-web-component release](https://img.shields.io/npm/v/@readalongs/ngx-web-component)](https://www.npmjs.com/package/@readalongs/ngx-web-component)
9+
310
Interactive story telling embeddable into any website!
411

512
<!-- TODO: put an animated GIF here, showing it off! -->
@@ -43,11 +50,7 @@ Clone the repo:
4350

4451
### Installing dependencies
4552

46-
First, make sure Nx is installed:
47-
48-
npm install -g nx
49-
50-
Then,
53+
Use `npm` to install all dependencies:
5154

5255
cd Web-Component
5356
npm install
@@ -58,37 +61,41 @@ Then,
5861

5962
If you are only developing the web-component you can run the following to start serving the test-data:
6063

61-
nx serve-test-data web-component
64+
npx nx serve-test-data web-component
6265

6366
Then, in another terminal, run the following to serve the web-component:
6467

65-
nx serve web-component
68+
npx nx serve web-component
6669

6770
Alternatively run together as:
6871

69-
nx run-many --targets=serve-test-data,serve --projects=web-component
72+
npx nx run-many --targets=serve-test-data,serve --projects=web-component
7073

7174
#### Studio-Web
7275

7376
To run Studio-Web, you first have to build the web-component:
7477

75-
nx build web-component --watch
78+
npx nx build web-component --watch
7679

77-
Then serve Studio-Web by running:
80+
Then serve Studio-Web by running (on port 4200 by default, use `--port=nnnn` to override):
7881

79-
nx serve studio-web
82+
npx nx serve studio-web
8083

8184
Ou en français:
8285

83-
nx serve studio-web --configuration=development-fr
86+
npx nx serve studio-web --configuration=development-fr
8487

8588
There are separate production and development serving configurations
86-
for each interface language, so you may for instance also use
87-
`development-en`, `production-en`, `production-fr` for
89+
for each interface language defined in `packages/studio-web/project.json`, so you may for instance also use
90+
`development-en`, `production-en`, `development-es`, `production-es`, `production-fr`, etc for
8891
`--configuration` above. Note that these configurations are _only_
8992
for the `serve` command. To build for deployment, see
9093
[below](#studio-web-2).
9194

95+
We have also defined targets `serve-fr` and `serve-es` in `project.json` so that you can launch the dev configs for all three supported languages at once with:
96+
97+
npx nx run-many --targets=serve,serve-fr,serve-es --projects=studio-web
98+
9299
Note that you will need to also spin-up the ReadAlong-Studio API in order to have Studio-Web work properly. To do that, first clone the Python Package/API repo:
93100

94101
git clone https://github.com/ReadAlongs/Studio.git
@@ -99,32 +106,32 @@ then run:
99106

100107
DEVELOPMENT=1 uvicorn readalongs.web_api:web_api_app --reload
101108

102-
If your Studio sandbox is in a sibling directory to this sandbox, and you Python environment is active, `nx serve-web-api studio-web` will run that command for you.
109+
If your Studio sandbox is in a sibling directory to this sandbox, and you Python environment is active, `npx nx serve-web-api studio-web` will run that command for you.
103110

104111
Alternatively run together as:
105112

106-
nx run-many --targets=serve-test-data,serve-web-api,serve --projects=web-component,studio-web --parallel 5
113+
npx nx run-many --targets=serve-test-data,serve-web-api,serve,serve-fr,serve-es --projects=web-component,studio-web --parallel 6
107114

108115
Studio-Web will automatically [publish](.github/workflows/publish.yml) to https://readalong-studio.mothertongues.org/ every time there is a change to `main`.
109116

110117
#### Understanding where the components come from when you run locally
111118

112-
When you run `nx serve studio-web`, that process is actually serving all the files needed
119+
When you run `npx nx serve studio-web`, that process is actually serving all the files needed
113120
by the Studio-Web application, and it's able to import `web-component` and `ngx-web-component`,
114121
providing them to the application as needed.
115122

116123
However, `web-component` requires a build in order to have the .js files generated and available
117124
to serve or import. In the instructions above, we actually show two methods you can use:
118125

119-
- `nx build web-component --watch` will only build that component, in production mode, and
126+
- `npx nx build web-component --watch` will only build that component, in production mode, and
120127
rebuild it any time you change that component's source code.
121128

122-
- `nx serve web-component` goes further, serving that component, which also requires building
129+
- `npx nx serve web-component` goes further, serving that component, which also requires building
123130
it. It also watches source code for changes. However, it produces a development build, which
124131
may be different from the production build.
125132

126133
In this case, the web-component is being served on port 3333, but the Studio-Web app
127-
just ignores that and uses the copy provided by `nx serve studio-web` instead.
134+
just ignores that and uses the copy provided by `npx nx serve studio-web` instead.
128135

129136
### Testing
130137

@@ -137,64 +144,87 @@ it launches on a different port, you will have to kill the currently
137144
running process using that port, whose PID you can find with `fuser -n
138145
tcp 3333`):
139146

140-
nx serve web-component
147+
npx nx serve web-component
141148

142149
Make sure this command is serving the test data on port 5000:
143150

144-
nx serve-test-data web-component
151+
npx nx serve-test-data web-component
145152

146153
Then run:
147154

148-
nx test:once web-component
155+
npx nx test:once web-component
149156

150157
Alternatively run together as:
151158

152-
nx run-many --targets=serve-test-data,serve,test:once --projects=web-component
159+
npx nx run-many --targets=serve-test-data,serve,test:once --projects=web-component
153160

154161
#### Studio-Web
155162

156163
To run the unit tests for Studio-Web, first build `web-component` in one of the ways listed
157-
above (or just `nx build web-component`) if you have not already done so, and then run:
164+
above (or just `npx nx build web-component`) if you have not already done so, and then run:
165+
166+
npx nx test:once studio-web
167+
168+
### Internationalization (i18n) and localization (l10n)
158169

159-
nx test:once studio-web
170+
`studio-web` is localized in French and Spanish. When you add new strings that need localizing,
171+
you can extract them with
172+
173+
npx nx extract-i18n studio-web
174+
175+
This will update `packages/studio-web/src/i18n/messages.json` with the English strings. Add or
176+
correct their translations in `messages.es.json` and `messages.fr.json`, and then
177+
run these checks to confirm all the required strings are there:
178+
179+
npx nx check-es-l10n studio-web
180+
npx nx check-fr-l10n studio-web
181+
182+
or
183+
184+
npx nx run-many --targets=check-es-l10n,check-fr-l10n --projects=studio-web
160185

161186
### Build & Publish
162187

163-
#### Web Component & Angular Wrapper
188+
#### Web Component & Angular Wrapper - via a PR
189+
190+
The publication of the web component and its angular wrapper has been automated in the `release.yml` workflow. To trigger it, submit a pull request to the `release` branch and get it reviewed. Publication will happen when the PR is merged.
164191

165-
To publish the web component, first you must belong to the [@readalongs organization](https://www.npmjs.com/org/readalongs) on NPM. Then, bump the version number in both `packages/web-component/package.json` and `packages/ngx-web-component/package.json` and build both the web component and angular wrapper:
192+
#### Web Component & Angular Wrapper - manually
166193

167-
nx build web-component
168-
nx build ngx-web-component
194+
WARNING: only use this process if the release workflow is broken.
169195

170-
Run the prepublish step for web-component:
196+
To publish the web component, first you must belong to the [@readalongs organization](https://www.npmjs.com/org/readalongs) on NPM. Then, bump the version number in both `packages/web-component/package.json` and `packages/ngx-web-component/package.json`, run `npm install` to reflect that bump in `package-lock.json`, and build both the web component and angular wrapper:
171197

172-
nx prepublish web-component
198+
npx nx build web-component
199+
npx nx build ngx-web-component
173200

174201
Run the bundler for single-file html exports:
175202

176-
nx bundle web-component
203+
npx nx bundle web-component
177204

178205
Alternatively run together as:
179206

180-
nx run-many --targets=build,prepublish,bundle --projects=web-component,ngx-web-component --parallel 1
207+
npx nx run-many --targets=build,bundle --projects=web-component,ngx-web-component --parallel 1
181208

182209
Then, go to the directory and publish:
183210

184211
cd dist/packages/web-component && npm publish --access=public
185212
cd dist/packages/ngx-web-component && npm publish --access=public
186213

214+
Then you also have to make sure to tag the repo with the new version and create a matching GitHub release.
215+
187216
#### Studio-Web
188217

189218
To build the web application in the currently deployed configuration
190-
(English interface in the root and French under `/fr`), run:
219+
(English interface in the root and French under `/fr`, and Spanish under `/es`), run:
191220

192-
nx build studio-web --configuration=production
193-
nx build studio-web --configuration=production --localize=fr --deleteOutputPath=false
221+
npx nx build studio-web --configuration=production
222+
npx nx build studio-web --configuration=production --localize=fr --deleteOutputPath=false
223+
npx nx build studio-web --configuration=production --localize=es --deleteOutputPath=false
194224

195225
To build with each interface language in its own directory, run:
196226

197-
nx build studio-web --configuration=production --localize=en --localize=fr
227+
npx nx build studio-web --configuration=production --localize=en --localize=fr --localize=es
198228

199229
This will create a complete website under `dist/packages/studio-web/`
200230
which you can deploy in whatever fashion you like to your server

0 commit comments

Comments
 (0)