According to https://nx.dev/recipes/generators/creating-files
Generators provide an API for managing files within your workspace. You can use generators to do things such as create, update, move, and delete files.
it's possible to delete files in an NX generator.
I have the following code that generates a node application but I want to delete some of the generated files.
import { readProjectConfiguration, Tree } from '#nrwl/devkit';
import { applicationGenerator } from '#nrwl/node'
export interface Schema {
name: string
}
export default async function (tree: Tree, schema: Schema) {
// create node application with name `schema.name`
await applicationGenerator(tree, {
name: schema.name
})
const projectRoot = readProjectConfiguration(tree, schema.name).sourceRoot
if (!projectRoot) throw new Error(`${schema.name} is not a project found in project configuration`)
// here I want to delete generated files:
// apps/myapp/src/app/.gitkeep
// apps/myapp/src/assets/.gitkeep
// apps/myapp/src/environments/environment.prod.ts
// apps/myapp/src/environments/environment.ts
}
Output
CREATE apps/myapp/src/app/.gitkeep
CREATE apps/myapp/src/assets/.gitkeep
CREATE apps/myapp/src/environments/environment.prod.ts
CREATE apps/myapp/src/environments/environment.ts
CREATE apps/myapp/src/main.ts
CREATE apps/myapp/tsconfig.app.json
CREATE apps/myapp/tsconfig.json
CREATE apps/myapp/project.json
CREATE apps/myapp/.eslintrc.json
CREATE apps/myapp/jest.config.ts
CREATE apps/myapp/tsconfig.spec.json
What API is used for deleting files?
Turned out to be very simple.
tree.delete(filePath)
In my case,
...
// Delete generated files:
// apps/myapp/src/app/.gitkeep
// apps/myapp/src/assets/.gitkeep
// apps/myapp/src/environments/environment.prod.ts
// apps/myapp/src/environments/environment.ts
tree.delete(joinPathFragments(projectRoot, 'src/app'))
tree.delete(joinPathFragments(projectRoot, 'src/assets'))
tree.delete(joinPathFragments(projectRoot, 'src/environments'))
Related
I am developing plugin/index.ts file where I place async functions eg. clearing the database or uploading files to the app, but it starts to grow and I think about a way to keep it clean and structured.
In this video I see that there is a way to store functions in separate files and then export them using module.exports = { function } and then in the index.ts just import them using require.
But I can't have it working for my case.
This is a simplistic form of my plugins/index.ts file:
const uploadDocument = require('./documents');
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
on('task', {
clearDatabase: clearDatabase,
uploadDocument: uploadDocument,
});
async function clearDatabase() { ... }
}
I decided to move the code of function uploadDocument to the plugins/documents.ts file:
and this is how the file plugins/documents.ts looks like:
imports...
async function uploadDocument(fileName: string) { ... }
module.exports = { uploadDocument }
And when I run the test with a task this way:
cy.task("uploadDocument", 'Very_light_file.pdf')
I get this error in Cypress:
It looks like the problem is with your module.exports and the import.
Try this,
// document.ts
export async function uploadDocument(fileName: string) { ... }
// module.exports = { uploadDocument }
// plugins/index.ts
import { uploadDocument } from './documents'
From the post, I can tell TS is mixed JS there. The example is in JS, you're using TS, so there is no module.exports.
Try a pure JS version, then later convert it to TS.
If you look at cypress-io/cypress-realworld-app/blob/develop/cypress/plugins/index.ts you can see they change module.exports to:
// cypress/plugins/index.ts
export default (on, config) => {
config.env.defaultPassword = process.env.SEED_DEFAULT_USER_PASSWORD;
config.env.paginationPageSize = process.env.PAGINATION_PAGE_SIZE;
// Auth0
//
//
}
I am using AWS CDK to build my lambda, and I would like to register endpoints from the lambda's CDK stack.
I found I can get an existing ApiGateway construct using fromRestApiId(scope, id, restApiId)
(documentation here)
So currently this works well:
//TODO how to look up by ARN instead of restApiId and rootResourceId??
const lambdaApi = apiGateway.LambdaRestApi
.fromRestApiAttributes(this, generateConstructName("api-gateway"), {
restApiId: <API_GATEWAY_ID>,
rootResourceId: <API_GATEWAY_ROOT_RESOURCE_ID>,
});
const lambdaApiIntegration = new apiGateway.LambdaIntegration(lambdaFunction,{
proxy: true,
allowTestInvoke: true,
})
const root = lambdaApi.root;
root.resourceForPath("/v1/meeting/health")
.addMethod("GET", lambdaApiIntegration);
But I would like to deploy to many AWS accounts, and many regions. I don't want to have to hardcode the API_GATEWAY_ID or API_GATEWAY_ROOT_RESOURCE_ID for each account-region pair.
Is there a more generic way to get the existing ApiGateway construct, (e.g. by name or ARN)?
Thank you in advance.
Lets take a simple Api with one resource
const restApi = new apigw.RestApi(this, "my-api", {
restApiName: `my-api`,
});
const mockIntegration = new apigw.MockIntegration();
const someResource = new apigw.Resource(this, "new-resource", {
parent: restApi.root,
pathPart: "somePath",
defaultIntegration: mockIntegration,
});
someResource.addMethod("GET", mockIntegration);
Lets assume we want use this api and resource in another stack, we first need to export
new cdk.CfnOutput(this, `my-api-export`, {
exportName: `my-api-id`,
value: restApi.restApiId,
});
new cdk.CfnOutput(this, `my-api-somepath-export`, {
exportName: `my-api-somepath-resource-id`,
value: someResource.resourceId,
});
Now we need to import in new stack
const restApi = apigw.RestApi.fromRestApiAttributes(this, "my-api", {
restApiId: cdk.Fn.importValue(`my-api-id`),
rootResourceId: cdk.Fn.importValue(`my-api-somepath-resource-id`),
});
and simply add additional resources and methods.
const mockIntegration = new apigw.MockIntegration();
new apigw.Resource(this, "new-resource", {
parent: restApi.root,
pathPart: "new",
defaultIntegration: mockIntegration,
});
I am building a NextJS application, currently I am using getStaticPaths and getStaticProps to build the static pages, doing the necessary requests for them.
So I want to build all the pages following this url: challenge/[slug]/ and for each slug that corresponds to an id I want to have a applications page like this: challenge/[slug]/applications to archive this I builded a file [...slug] inside /pages/challenge
Inside that file I have the following code to handle the static generation:
export async function getStaticPaths() {
const response: any = await getPrograms()
const paths = response.results.map(result => {
return { params: { slug: [result.id.toString()] } }
})
return { paths, fallback: true }
}
export async function getStaticProps({ params }) {
const res = await getProgram(params.slug[0])
const stages = await getStages(params.slug[0])
return { props: { program: res, stages: stages }, revalidate: 1 }
}
this solution works for /challenge/[slug], but the /challenge/[slug]/applications receives a 404, how can I render a specific application page for the slug?
I tried to add a second position to the slug array, but if I do it I can just render /challenge/[slug]/applications and not /challenge/[slug]
Any advice?
Thanks!
Firstly, You need to create a FOLDER named [slug]. Then, Create a FILE named applications.js. Lastly, copy and paste that code into this page.
__ challenge
|__ [slug]
|__ applications
In this page you can get or set slug as your desired parameter.
I have the following object:
const basePoints = {}
which I need to fill with json files. Currently I do:
import WH11 from 'assets/WH11';
const basePoints = { WH11}
I have like a dozen of such Json files but only 2-3 can be used at a given time. INstead of importing and loading all the JSON files i don't need, I want to require/import based on a config file as shown below:
and my config.js:
const config = {
basePoints: {
"WH11": "West Gate",
"WH12": "West Gate Back Drop"
}
}
WH11, WH12 etc basically exist in json format in my assets directory:
assets/basepoints/WH11.json
{
"startingID" : 198
}
etc. Now there can a dozen or more of such json files. The user just adds the ones to be used for the month in config.js.
Is there a way to require/import the json file based on the config file. The app can't compile if I do:
Object.keys(config.basePoints).forEach(key => {
basePoints[key] = require('../assets/basepoints/' + key + '.json');
});
the error is unexpected require().
You can use the latest ES2020 feature - Dynamic Import
Syntax -
import('/modules/<module_name>')
.then(module => {
//
})
.catch(err => {
//
});
You can learn more about it in this MDN document (scroll down to the dynamic import section) -
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
I would like to upload an image to AWS s3 before I add it to the editor. I would like to do it inside ImageBlot because I am using insertEmbed in several places. This is the example code by the QillJS team.
Quill.register(ImageBlot);
export class ImageBlot extends BlockEmbed {
static create(value) {
const node = super.create();
node.setAttribute('alt', value.alt);
node.setAttribute('src', value.url);
return node;
}
static value(node) {
return {
alt: node.getAttribute('alt'),
url: node.getAttribute('src')
};
}
}
ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';
Is it possible to add custom functions to ImageBlot through Quill.register or any other way? I am using React and Redux, hence my actions have to be connected and can't just be imported.