I'm working on a React component library and I'm trying to figure out what would be the best way to make it configurable.
I'd want to achieve something similar to TailwindCSS, where you can run an npx script:
npx my-library init
which creates a configuration file in the project dir. The developer would then be able to change up that configuration, include design tokens for their brand, etc.
E.g.:
// config.js
module.exports = {
tokens: {
"Teal/800": {
"value": "#34a99a",
"type": "color"
},
"Cyan/400": {
"value": "#1f4e61",
"type": "color"
},
"Cyan/500": {
"value": "#246277",
"type": "color"
}
},
footerCompanyUrl: "https://example.com",
brandFontStack: ['Nunito Sans', 'Inter'],
openLinksInNewTab: true
}
Once the developer has decided on their configuration, they would run npm run build, which would run a script that rebuilds the components and/or their styles, taking into account the values defined in the configuration file.
How could I achieve something like this?
Related
I'm working on a React application inside my NX Workspace.
Now I want to add sentry to my project. I already have a deploy configuration in my project.json. But I'm struggling with adding the step to upload the source maps.
Here is my project.json
"deploy": {
"executor": "nx:run-commands",
"options": {
"parallel": false,
"commands": [
{
"command": "nx run my-app:build:{args.target}",
"forwardAllArgs": true
},
{
"command": "echo Run {args.target} deployment on {args.server}",
"forwardAllArgs": true
},
{
"command": "rsync -avz --progress --delete dist/apps/my-app/ {args.user}#{args.server}:{args.path}",
"forwardAllArgs": true
},
{
"command": "echo my-app deployed to {args.target}",
"forwardAllArgs": true
}
]
},
"configurations": {
"production": {
"args": "--target=production --user=user --server=myserver.com --path=path/to/app"
}
}
}
Is there any example of how to perform the upload of the source maps using a nx workspace? Or do I have to create a custom script that handles everything and put it into my project.json as the second command (after build, before deploy).
Also, I'm not sure how to handle the version number of my application as NX does not provide a way to define version numbers for each application inside the workspace.
You'll have to create a custom webpack config on the Nx project: https://nx.dev/recipes/other/customize-webpack
and then follow the instructions on how to setup it on Sentry using webpack:
https://docs.sentry.io/platforms/javascript/guides/react/sourcemaps/uploading/webpack/
Your custom webpack should look like something like this:
const {merge} = require('webpack-merge')
const SentryWebpackPlugin = require('#sentry/webpack-plugin')
const nrwlConfig = require('#nrwl/react/plugins/webpack.js')
module.exports = (config) => {
// merge config from #nrwl/react first
nrwlConfig(config)
return merge(config, {
devtool: 'source-map', // Source map generation must be turned on
plugins: [
new SentryWebpackPlugin({
org: 'orgId',
project: 'projectId',
// Specify the directory containing build artifacts
include: './build',
// Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
// and needs the `project:releases` and `org:read` scopes
authToken: process.env.NX_SENTRY_AUTH_TOKEN,
// Optionally uncomment the line below to override automatic release name detection
// release: process.env.RELEASE,
}),
],
})
}
Please notice that unfortunately this is not a final answer, because with this I can upload the artifact, but the source maps are still not working on Sentry and I don't know why yet - but maybe this can be helpful somehow to you.
i have some files from node_modules they need to be saved in cache because i am getting this information
enter image description here
to get this information i audited with lighthouse this is the web https://www.webpagetest.org/
this is the final result, "cache static content" is the wrong
enter image description here
i am working with Gatsby, i found this information about my problem https://www.gatsbyjs.com/docs/caching/#javascript-and-css but i am not sure how can i use it or should i use another library? i dont have idea how can i cache
i think i should use these properties:
The cache-control header should be cache-control: public, max-age=31536000, immutable
this is my file gatsby-config
plugins: [
'gatsby-plugin-top-layout',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/src/assets`,
},
},
`gatsby-plugin-image`,
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-plugin-manifest',
options: {
},
},
{
resolve: `gatsby-plugin-offline`,
options: {
precachePages: ['/projects/'],
},
},
{
resolve: 'gatsby-plugin-material-ui',
my propuse to do this is solve this problem, there are a blank space when i reload the web application
blank space
Gatsby generates static content. It doesn't handle sending HTTP responses. That's going to be a web server (or in your case firebase).
Checkout the docs for sending headers on firebase
https://firebase.google.com/docs/hosting/full-config#headers
You'll need something like:
"hosting": {
"headers": [ {
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [ {
"key": "cache-control",
"value": "public, max-age=31536000, immutable"
} ]
} ]
}
This caches font files which is generally safe because fonts change very rarely.
You can add js and css to that list if you want as well. Keep in mind that you'll need to change the names of an js and css files or the browser will wait 1 year before reloading them.
I'm trying to set a pipeline that automatically creates a review build for my create-react-app which I can review from GitHub.
This is my app.json file:
{
"name": "harry100-exercise",
"scripts": {
},
"env": {
},
"formation": {
"web": {
"quantity": 1
}
},
"addons": [
],
"buildpacks": [
{
"url": "heroku/nodejs"
}
]
}
I have created a pipeline and enabled auto deploying for the master branch.
But everytime I create a pull request on github, I have to manually click create review app on heroku to view the review app
Any help on this?
Make sure you don't have "Wait for CI to pass" checked on the Review Apps setting page for the pipeline you are editing.
I have an ExtJS package with the following structure:
PackageA/
classic/
resrouces/
file.json
classic_resource.json
resources/
file.json
resource.json
When I build the app in production mode requiring the packageA, in the build directory I see the following:
./build/production/MyApp/classic/resources/PackageA/file.json
./build/production/MyApp/classic/resources/PackageA/classic_resource.json
./build/production/MyApp/classic/resources/PackageA/resource.json
It looks like both the shared package resources and toolkit (classic) specific are copied to the same directory (./MyApp/classic/resources/PackageA/), and if the same file exists already, it will simply be overwritten (file.json).
However, in my case the classic/resources/file.json and resources/file.json have different content and I require to keep them both in the build.
How can I achieve this?
[EDIT]
app.json
"output": {
"base": "${workspace.build.dir}/${build.environment}/${app.name}",
"page": "index.html",
"manifest": "${build.id}.json",
"js": "${build.id}/app.js",
"appCache": {
"enable": false
},
"resources": {
"path": "${build.id}/resources",
"shared": "resources"
},
"framework": {
"path": "${build.id}/framework.js",
"enable": true
}
},
"resources": [
{
"path": "resources",
"output": "shared"
},
{
"path": "${toolkit.name}/resources"
},
{
"path": "${build.id}/resources"
}
],
package.json
"output": "${package.dir}/build",
"resource": {
"paths": [
"${package.dir}/resources",
"${package.dir}/${toolkit.name}/resources"
]
},
Its happen because you create resources directory on toolkit's directory which should not be there.
Readme.md in the newly generated package
This classic-specific directory can include any (if not all) of the following directories:
overrides: Any classes in this directory will be automatically required and included in the classic build.
In case any of these classes define an Ext JS override (using Ext.define with an "override" property),
that override will in fact only be included in the build if the target class specified
in the "override" property is also included.
sass: Any classic-specific style rules should reside in this package, following the same structure
as the directory in the package root (see package.json for more information).
src: The classic-specific classes of this package should reside in this directory.
If you need resources separated by toolkit do it on package's root resources directory.
I am using sencha cmd 6 and trying to build native app with help of -
https://docs.sencha.com/cmd/6.x/cordova_phonegap.html
I have generated Ext 6+ universal application using following command:
sencha -sdk /path/to/Framework generate app MyApp /path/to/MyApp
Then I have added following code in app.json -
"builds": {
"classic": {
"toolkit": "classic",
"theme": "theme-triton",
"sass": {
// "save": "classic/sass/save.json"
}
},
"native": {
"toolkit": "modern",
"theme": "theme-cupertino",
"packager": "phonegap",
"phonegap": {
"config": {
"platforms": "ios android",
"id": "com.mydomain.MyApp"
}
}
}
}
But after running sencha app build android, I am getting following exception -
BUILD FAILED
java.lang.NullPointerException
at org.a
pache.tools.ant.helper.SingleCheckExecutor.executeTargets(SingleCheckExecutor.java:38)
Also as per suggestion in Developing a PhoneGap application from sencha doc, i have modified app.json with following code -
"builds": {
"native": {
"packager": "phonegap",
"phonegap" : {
"config": {
"platforms": "ios android",
"id": "com.mydomain.MyApp"
}
}
}
}
But after this, following exception is coming on my console -
Failed to resolve dependency Ext.app.Application for file MyApp.Application
BUILD FAILED
com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.app.Application
I know this is a late answer, but it might help someone else landing on this page.
To resolve the dependency, we need to include the toolkit and theme in our build profile:
"native": {
"toolkit": "modern",
"theme": "theme-cupertino",
"packager": "cordova",
"cordova": {
"config": {
"platforms": "android",
"id": "com.mydomain.NewApp"
}
}
}
In context, the build profile should look like:
Please find the answer to this question on following link -
https://www.sencha.com/forum/showthread.php?304530-Unable-to-create-Native-app-using-command-sencha-app-build-native