Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@openedx/frontend-build
Advanced tools
Readme
The purpose of this package is to provide a common sense foundation and setup for frontend projects including:
This package can serve as a single dev dependency replacing a large number of dev and build dependencies. It aims to provide common sense defaults that should be good for most edX projects out of the box, but can extended or overridden where needed.
1. Clone your new repo:
``git clone https://github.com/openedx/frontend-build.git``
2. Use node v18.x.
The current version of the micro-frontend build scripts support node 18.
Using other major versions of node *may* work, but this is unsupported. For
convenience, this repository includes an .nvmrc file to help in setting the
correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
3. Install npm dependencies:
``cd frontend-build && npm ci``
CLI commands are structured: fedx-scripts <targetScript> <options>
.
Options are passed on to the target script, so refer to each target
script's CLI documentation to learn what options are available. Example
package.json:
{
"scripts": {
"build": "fedx-scripts webpack",
"i18n_extract": "fedx-scripts formatjs extract",
"lint": "fedx-scripts eslint --ext .jsx,.js .",
"precommit": "npm run lint",
"snapshot": "fedx-scripts jest --updateSnapshot",
"start": "fedx-scripts webpack-dev-server --progress",
"test": "fedx-scripts jest --coverage --passWithNoTests",
"serve": "fedx-scripts serve"
},
"dependencies": {
...
},
"devDependencies": {
"@openedx/frontend-build": "1.0.0"
}
}
This package contains a set of configuration presets:
If you need to extend or modify a configuration you can add your own configuration files, either by extending frontend-build's configuration files or supplying your own wholesale.
Method 1: Extend base config (babel.config.js):
const { createConfig } = require('@openedx/frontend-build');
module.exports = createConfig('babel', {
/* option overrides or extensions */
});
Method 2: Custom manipulations (babel.config.js):
const { getBaseConfig } = require('@openedx/frontend-build');
const config = getBaseConfig('babel');
/* Custom config manipulations */
module.exports = config;
Frontend build will look in the following locations for configuration files in your project.
<project_root>/.eslintrc.js
<project_root>/jest.config.js
<project_root>/babel.config.js
<project_root>/webpack.prod.config.js
<project_root>/webpack.dev.config.js
You may specify custom config file locations via the command line if you prefer a different location. Example package.json:
{
"scripts": {
"build": "fedx-scripts webpack --config ./config/webpack.config.js",
"start:stage": "fedx-scripts webpack-dev-server --config webpack.dev-stage.config.js",
...
}
}
Note, specifying a custom config location for babel may cause issues with other tools in frontend-build. eslint, jest, webpack, and webpack-dev-server configuration presets rely upon the babel config and resolve the location of the config file according to the default locations described above. If you need to move the babel config file to a custom location, you may also need to customize references to its location in other configuration files. Please reach out to the FedX team if you need to do this and are running into problems.
The development webpack configuration allows engineers to create a "module.config.js" file containing local module overrides. This means that if you're developing a new feature in a shared library (@edx/frontend-platform, @openedx/paragon, etc.), you can add the local location of that repository to your module.config.js file and the webpack build for your application will automatically pick it up and use it, rather than its node_modules version of the file.
NOTE: This module.config.js file should be added to your [.gitignore]{.title-ref}.
An example module.config.js file looks like the following. You can copy this into your application to use local versions of paragon and frontend-platform:
module.exports = {
/*
Modules you want to use from local source code. Adding a module here means that when this app
runs its build, it'll resolve the source from peer directories of this app.
moduleName: the name you use to import code from the module.
dir: The relative path to the module's source code.
dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
*/
localModules: [
{ moduleName: '@openedx/brand', dir: '../src/brand-openedx' }, // replace with your brand checkout
{ moduleName: '@openedx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
{ moduleName: '@openedx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
{ moduleName: '@openedx/paragon', dir: '../src/paragon', dist: 'dist' },
{ moduleName: '@edx/frontend-platform', dir: '../src/frontend-platform', dist: 'dist' },
],
};
module.config.js
into your frontend app repository,
modifying it as necessary.npm install && npm run build
within any shared NPM package you
want to use locally.../src
(relative to the root of your
frontend app repository) is recommended for shared NPM package
repositories, since it will work whether or not you are running your
frontend via devstack. If you are not running your frontend via
devstack, then you can place your shared libraries anywhere in your
file system, updating the "dir" key accordingly. To learn more,
see this devstack ADR on local
packages.In some situations, you may want to override development environment variables defined in .env.development with private environment variables that should never be checked into a repository. For example, a .env.development file may contain secrets for a third-party service (e.g., Algolia) that you'd like to use during development but want to ensure these secrets are not checked into Git.
You may create a [.env.private]{.title-ref} with any overrides of the environment settings configured in [.env.development]{.title-ref}.
Note: .env.private should be added to your project's .gitignore so it does not get checked in.
In some scenarios, you may want to run a production Webpack build locally. To serve a production build locally:
env.config.js
file containing the configuration for
local development, with the exception of NODE_ENV='production'
.npm run build
to build the production assets. The output
assets will rely on the local development configuration specified in
the prior step.serve
to your application's package.json
(i.e., "serve": "fedx-scripts serve"
).npm run serve
to serve your production build assets. It will
attempt to run the build on the same port specified in the
env.config.js
file.#. Create file in repository tsconfig.json
, with a clause "extends": "@openedx/frontend-build"
#. Set "rootDir" to the root of the source code folders
#. Set "include" to wildcard patterns specifying the subdirectories/files under rootDir where source code can be found
#. Include any wildcards under rootDir that should be excluded using "exclude"
{
"extends": "@edx/typescript-config",
"compilerOptions": {
"rootDir": ".",
"outDir": "dist"
},
"include": ["src/**/*"],
"exclude": ["dist", "node_modules"]
}
This project leverages the command line interface for webpack, jest, eslint, and babel. Because of this, local development can be tricky. The easiest way to do local development on this project is to either run scripts inside the project in example or to test with an existing project you can do the following:
rm -rf node_modules/
mv ../frontend-build ./ && rm -rf frontend-build/node_modules
npm i --save-dev @openedx/frontend-build@file:./frontend-build
.The code in this repository is licensed under the AGPLv3 unless otherwise noted.
Please see LICENSE for details.
Contributions are very welcome. Please read How To Contribute for details.
This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.
If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.
Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel.
For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.
https://github.com/openedx/frontend-build/issues
For more information about these options, see the Getting Help page.
Please do not report security issues in public. Please email security@openedx.org.
To increase optimization by reducing unused CSS, you can set
USE_PURGECSS=true
in .env
or as ENV var in the corresponding MFE.
However, note that doing this will increase build time by 30%. It's
thus not recommended to use this option during development. On the other
hand, enabling PurgeCSS will increase browser performance for the end
user by as much as 20% (as measured by
lighthouse).
Operators are encouraged to do so for production deployments.
For more information about optimizing MFEs, refer to the issue #138 in the wg-frontend repository.
FAQs
Build tools, setup and config for frontend apps
The npm package @openedx/frontend-build receives a total of 2,339 weekly downloads. As such, @openedx/frontend-build popularity was classified as popular.
We found that @openedx/frontend-build demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.