Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
cultureamp-front-end-scripts
Advanced tools
The single dependency you need for building a Culture Amp front-end project.
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 1 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.