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.
cultureamp-front-end-scripts
Advanced tools
Readme
The single dependency you need for building a Culture Amp front-end project.
For Culture Amp staff:
For everyone else
WARNING: While this software is open source, its primary purpose is to improve consistency, cross-team collaboration and code quality at Culture Amp. As a result, it’s likely that we will introduce more breaking API changes to this project than you’ll find in its alternatives.
TODO: set up yarn create cultureamp-app
.
Create a package.json if you don't have one already:
yarn init
Add the scripts dependency:
yarn add cultureamp-front-end-scripts
Add these to your package.json scripts:
"scripts": {
"start": "cultureamp-front-end-scripts-start",
"build": "cultureamp-front-end-scripts-build",
"test": "cultureamp-front-end-scripts-test",
"lint": "cultureamp-front-end-scripts-lint",
"flow": "cultureamp-front-end-scripts-flow",
"format": "cultureamp-front-end-scripts-format"
},
Then run yarn start
and open http://localhost:8080/ to build, watch and preview your app.
yarn start
- start a development server and rebuild as files changeyarn build
- build production assetsyarn test
or yarn test --watch
- run jest testsyarn lint
- run eslint to check code quality on your filesyarn flow
- run flow for type checkingyarn format
- run prettier and eslint --fix
on all JS and CSS filesOur default project structure looks like this:
├── public
│ └── assets # Generated assets goes here
├── src
│ ├── main.js
│ └── main.test.js
├── package.json
└── yarn.lock
Things to note:
public/assets
. These should be git-ignored.public/assets/index.html
.public/
, meaning when you load http://localhost:8080/ your assets will be available at http://localhost:8080/assets/.public/index.html
.
The easiest solution may be to create a symlink: ln -s public/assets/index.html public/index.html
.
The index.html in the assets folder is generated by webpack and will include your scripts and stylesheets, even if the generated names include a unique hash.node_modules/cultureamp-front-end-scripts/config/
.cultureamp-front-end-scripts
dependency, which in turn loads the various dependencies needed to build a standard Culture Amp front-end with React or Elm, and SASS / PostCSS etc.yarn start
), the assets will not be updated on the file-system, the webserver compiles and serves them without updating the files on disk. To update the files in public/assets
you will need to run yarn build
.By default, our webpack configuration will:
src/main.js
as an entrypointpublic/assets
as an output path.bundle.js
to the names of output files, so you can reference the main.js
entrypoint from your HTML with <script src="assets/main.bundle.js">
src/
as a modules folder, so you can import src/components/dropdown.js
with import 'components/dropdown';
You can provide your own Webpack configuration by supplying a file webpack.config.js
.
Rather than creating an entire webpack configuration from scratch, we have created "WebpackConfigMaker" as an API that makes it easier to handle webpack configuration in a composable way using various presets.
// NOTE: this is still a work-in-progress
const WebpackConfigMaker = require('cultureamp-front-end-scripts/webpack-config-maker');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var configMaker = new WebpackConfigMaker();
configMaker.usePreset(
'cultureamp-front-end-scripts/config/webpack/presets/ca-standard'
);
configMaker.setEntryPoints([
'app/client/entrypoints/admin.js',
'app/client/entrypoints/demo.js',
'app/client/entrypoints/exit.js',
]);
configMaker.setSourceDirectories(['app/client/', 'lib/client/']);
configMaker.addPlugin('my-html-plugin', new HtmlWebpackPlugin());
module.exports = configMaker.generateWebpackConfig();
TODO: provide full documentation for WebpackConfigMaker.
By default our Jest configuration will:
src/**/*-test.js
. You can optionally keep them in a __tests__
folder if you prefer.automock
to false.config/jest/utils/setupShim.js
config/jest/utils/customMatchers.js
acceptCallsTo()
global function for working with mocked methods. See config/jest/utils/acceptCallsTo.js
You can provide your own Jest configuration by supplying a file jest.config.js
:
const baseConfig = require('cultureamp-front-end-scripts/config/jest/jest.config.js');
module.exports = {
...baseConfig,
automock: true,
};
By default our ESLint configuration will provide a collection of rules curated to Culture Amp's needs. It was originally based on the AirBNB style guide, and expects prettier to provide code formatting.
You can provide your own ESLint configuration by supplying a file eslint.config.js
:
const baseConfig = require('cultureamp-front-end-scripts/config/eslint/eslint.config.js');
const OFF = 0;
const WARN = 1;
const ERROR = 2;
module.exports = {
...baseConfig,
rules: {
...baseConfig.rules,
'prefer-const': OFF,
},
};
By default our Flow configuration will:
src/
node_modules
. You can use flow-typed
to correctly type 3rd party libraries.The flow configuration lives in .flowconfig
, and is copied into your directory the first time you run yarn flow
.
You can edit the flow configuration by editing this file.
We currently don't offer any default prettier configuration, preferring to stick to the defaults.
If you wish to change the settings you can provide your own configuration file.
FAQs
The single dependency you need for building a Culture Amp front-end project.
The npm package cultureamp-front-end-scripts receives a total of 27 weekly downloads. As such, cultureamp-front-end-scripts popularity was classified as not popular.
We found that cultureamp-front-end-scripts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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.