@@ -11,10 +11,10 @@ Status](https://api.travis-ci.com/edx/frontend-build.svg?branch=master)](https:/
11
11
The purpose of this package is to provide a common sense foundation and
12
12
setup for frontend projects including:
13
13
14
- - linting (eslint)
15
- - testing (jest)
16
- - development server (webpack-dev-server)
17
- - build (webpack)
14
+ - linting (eslint)
15
+ - testing (jest)
16
+ - development server (webpack-dev-server)
17
+ - build (webpack)
18
18
19
19
This package can serve as a single dev dependency replacing a large
20
20
number of dev and build dependencies. It aims to provide common sense
@@ -23,22 +23,20 @@ can extended or overridden where needed.
23
23
24
24
## Cloning and Startup
25
25
26
- ``` {.}
27
26
1 . Clone your new repo:
28
27
29
- `` git clone https://github.com/openedx/frontend-build.git``
28
+ git clone https://github.com/openedx/frontend-build.git
30
29
31
- 2. Use node v18.x.
30
+ 2 . Use node v18.x:
32
31
33
- The current version of the micro-frontend build scripts support node 18.
34
- Using other major versions of node *may* work, but this is unsupported. For
35
- convenience, this repository includes an .nvmrc file to help in setting the
36
- correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
32
+ > The current version of the micro-frontend build scripts support node 18.
33
+ > Using other major versions of node * may* work, but this is unsupported. For
34
+ > convenience, this repository includes an .nvmrc file to help in setting the
35
+ > correct node version via ` nvm <https://github.com/nvm-sh/nvm> ` _ .
37
36
38
37
3 . Install npm dependencies:
39
38
40
- ``cd frontend-build && npm ci``
41
- ```
39
+ cd frontend-build && npm ci
42
40
43
41
## Usage
44
42
@@ -70,26 +68,26 @@ package.json:
70
68
71
69
This package contains a set of configuration presets:
72
70
73
- - webpack-prod (or webpack)
74
- - webpack-dev (or webpack-dev-server)
75
- - webpack-dev-stage (for running development apps against stage apis)
76
- - babel
77
- - babel-preserve-modules
78
- - jest
79
- - eslint
71
+ - webpack-prod (or webpack)
72
+ - webpack-dev (or webpack-dev-server)
73
+ - webpack-dev-stage (for running development apps against stage apis)
74
+ - babel
75
+ - babel-preserve-modules
76
+ - jest
77
+ - eslint
80
78
81
79
If you need to extend or modify a configuration you can add your own
82
80
configuration files, either by extending frontend-build\' s configuration
83
81
files or supplying your own wholesale.
84
82
85
- Method 1: Extend base config (babel.config.js):
83
+ ### Method 1: Extend base config (babel.config.js)
86
84
87
85
const { createConfig } = require('@openedx/frontend-build');
88
86
module.exports = createConfig('babel', {
89
87
/* option overrides or extensions */
90
88
});
91
89
92
- Method 2: Custom manipulations (babel.config.js):
90
+ ### Method 2: Custom manipulations (babel.config.js)
93
91
94
92
const { getBaseConfig } = require('@openedx/frontend-build');
95
93
const config = getBaseConfig('babel');
@@ -101,11 +99,11 @@ Method 2: Custom manipulations (babel.config.js):
101
99
Frontend build will look in the following locations for configuration
102
100
files in your project.
103
101
104
- - eslint: ` <project_root>/.eslintrc.js `
105
- - jest: ` <project_root>/jest.config.js `
106
- - babel: ` <project_root>/babel.config.js `
107
- - webpack-prod: ` <project_root>/webpack.prod.config.js `
108
- - webpack-dev-server: ` <project_root>/webpack.dev.config.js `
102
+ - eslint: ` <project_root>/.eslintrc.js `
103
+ - jest: ` <project_root>/jest.config.js `
104
+ - babel: ` <project_root>/babel.config.js `
105
+ - webpack-prod: ` <project_root>/webpack.prod.config.js `
106
+ - webpack-dev-server: ` <project_root>/webpack.dev.config.js `
109
107
110
108
You may specify custom config file locations via the command line if you
111
109
prefer a different location. Example package.json:
@@ -138,8 +136,7 @@ location of that repository to your module.config.js file and the
138
136
webpack build for your application will automatically pick it up and use
139
137
it, rather than its node\_ modules version of the file.
140
138
141
- ** NOTE: This module.config.js file should be added to your**
142
- [ .gitignore] {.title-ref}.
139
+ ** NOTE: This module.config.js file should be added to your ` .gitignore ` .**
143
140
144
141
An example module.config.js file looks like the following. You can copy
145
142
this into your application to use local versions of paragon and
@@ -173,19 +170,17 @@ frontend-platform:
173
170
174
171
## Notes
175
172
176
- - The \" dir\" and \" dist\" keys give you granular control over the
177
- shape of your repository\' s distribution. Paragon, for instance,
178
- needs two separate entries to pick up both JS and SCSS imports.
179
- - The directory location ` ../src ` (relative to the root of your
180
- frontend app repository) is recommended for shared NPM package
181
- repositories, since it will work whether or not you are running your
182
- frontend via devstack. If you are * not* running your frontend via
183
- devstack, then you can place your shared libraries anywhere in your
184
- file system, updating the \" dir\" key accordingly. To learn more,
185
- see [ this devstack ADR on local
186
- packages] ( https://github.com/openedx/devstack/tree/master/docs/decisions/0005-frontend-package-mounts.rst ) .
187
- - This mechanism uses Webpack resolve aliases, as documented here:
188
- < https://webpack.js.org/configuration/resolve/#resolvealias >
173
+ - The \" dir\" and \" dist\" keys give you granular control over the
174
+ shape of your repository\' s distribution. Paragon, for instance,
175
+ needs two separate entries to pick up both JS and SCSS imports.
176
+ - The directory location ` ../src ` (relative to the root of your frontend app repository)
177
+ is recommended for shared NPM package repositories, since it will work whether or
178
+ not you are running your frontend via devstack. If you are * not* running your
179
+ frontend via devstack, then you can place your shared libraries anywhere in your
180
+ file system, updating the \" dir\" key accordingly. To learn more, see [ this devstack
181
+ ADR on local
182
+ packages] ( https://github.com/openedx/devstack/tree/master/docs/decisions/0005-frontend-package-mounts.rst ) .
183
+ - This mechanism uses Webpack resolve aliases, as documented here: https://webpack.js.org/configuration/resolve/#resolvealias
189
184
190
185
## Override default .env.development environment variables with .env.private
191
186
@@ -196,8 +191,8 @@ that should never be checked into a repository. For example, a
196
191
(e.g., Algolia) that you\' d like to use during development but want to
197
192
ensure these secrets are not checked into Git.
198
193
199
- You may create a [ .env.private] {.title-ref} with any overrides of the
200
- environment settings configured in [ .env.development] {.title-ref} .
194
+ You may create a ` .env.private ` with any overrides of the
195
+ environment settings configured in ` .env.development ` .
201
196
202
197
** Note: .env.private should be added to your project\' s .gitignore so it
203
198
does not get checked in.**
@@ -295,8 +290,7 @@ Help](https://openedx.org/community/connect) page.
295
290
296
291
## Reporting Security Issues
297
292
298
- Please do not report security issues in public. Please email
299
-
293
+ Please do not report security issues in public. Please email
[email protected] .
300
294
301
295
## Optimization
302
296
0 commit comments