This is simplified folder structure in my React application created with the create-react-app. For the back-end I'm using the Express framework.
└── ReactApp/
├── client/
| ├── node_modules/
| ├── public/
| └── src/
| └── components/
| └── component.js
└── server/
├── index.js
└── Uploads/
└── file.txt
Inside component.js file I want to define the path to the file.txt file located to the server/Uploads folder.
handleClick() {
const pathToFile = '../../server/Uploads/file.txt;
this.setState({ input: pathToFile})
}
The issue is that this defined path cannot locate the txt file inside the Uploads folder.
Try:
handleClick() {
const pathToFile = '../../../server/Uploads/file.txt';
this.setState({ input: pathToFile})
}
The solution is to configure ExpressJS to serve static files inside the Uploads folder.
index.js
app.use(express.static('Uploads'));
and then change the path inside the component.js file.
handleClick() {
const pathToFile = 'file.txt';
this.setState({ input: pathToFile})
}
Related
I'm new to BDD and Jasmine, and I'm not able to configure https://www.npmjs.com/package/jasmine-pretty-html-reporter to get html of test pass rate.
There it mentions a basic setup:
var Jasmine = require('jasmine');
var HtmlReporter = require('jasmine-pretty-html-reporter').Reporter;
var jasmine = new Jasmine();
jasmine.loadConfigFile('./spec/support/jasmine.json');
// options object
jasmine.addReporter(new HtmlReporter({
path: path.join(__dirname,'results')
}));
jasmine.execute();
However, I'm not sure where should I perform those configuration (in which file).
Could anyone help me with this, please?
Thanks in advance!
The setup provided by this package is used jasmine as a library. See Using the library.
This means we can execute test cases programmatically. We execute this module via node, e.g.
Folder structure:
⚡ tree -L 2 -I 'node_modules'
.
├── README.md
├── jasmine.json
├── package-lock.json
├── package.json
├── src
│ ├── helpers
│ └── stackoverflow
├── test-reporter
│ └── report.html
└── tsconfig.json
4 directories, 6 files
src/stackoverflow/70338811/as-a-library.js:
var Jasmine = require('jasmine');
var path = require('path');
var HtmlReporter = require('jasmine-pretty-html-reporter').Reporter;
var jasmine = new Jasmine();
jasmine.loadConfigFile(path.resolve(__dirname, '../../../jasmine.json'));
jasmine.addReporter(
new HtmlReporter({
path: path.join(__dirname, '../../../test-reporter'),
}),
);
jasmine.execute();
npx ts-node <Absolute_path>/src/stackoverflow/70338811/as-a-library.js
If you want to use jasmine as a CLI and run the test cases via npm script. You should add this custom reporter to the Jasmine environment. See Reporters. We need to create a helper file in src/helpers folder to add custom reporter, e.g. pretty-html-reporter.js
var HtmlReporter = require('jasmine-pretty-html-reporter').Reporter;
var path = require('path');
jasmine.getEnv().addReporter(
new HtmlReporter({
path: path.join(__dirname, '../../test-reporter'),
}),
);
npm script:
"test": "ts-node node_modules/jasmine/bin/jasmine --config=./jasmine.json",
Now, let's run test cases of a specific file.
⚡ npm t /Users/dulin/workspace/github.com/mrdulin/jasmine-examples/src/stackoverflow/69830430/index.test.ts
> jasmine-examples# test /Users/dulin/workspace/github.com/mrdulin/jasmine-examples
> ts-node node_modules/jasmine/bin/jasmine --config=./jasmine.json "/Users/dulin/workspace/github.com/mrdulin/jasmine-examples/src/stackoverflow/69830430/index.test.ts"
Randomized with seed 02843
Started
.
1 spec, 0 failures
Finished in 0.014 seconds
Randomized with seed 02843 (jasmine --random=true --seed=02843)
The test reporter is generated in the test-reporter folder.
source code: https://github.com/mrdulin/jasmine-examples
Situation
I have a monorepo created with lerna with 40-50 projects. Each has a package.json like this.
{
"name": "#base-repo/add-class-methods",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
The folder structure is like this,
packages
├── absolute-url
│ ├── index.js
│ └── package.json
├── add-class-methods
│ ├── index.js
│ └── package.json
├── check-set-relative
│ ├── index.js
│ └── package.json
├── crypto
│ ├── index.js
│ └── package.json
If I push it to github, it will have a single github url, however I saw babel has 142 packages where each of them has a custom repository field in the package.json.
"repository": "https://github.com/babel/babel/tree/master/packages/babel-types"
I hope they are not setting this value manually for 142 packages. Same with my 40 small packages.
I understand I can manually set them in 3-4 minutes by the time I am writing this question. However this will get overwhelming when I try to do the same with a 150 package monorepo or in future.
Problem
How can I set/update the repository field without opening each package.json file manually for 40 packages?
What I tried
Manually set each as possible, but things quickly got boring and repeating considering I am a programmer. Then I googled the solution for around an hour. Finally I wrote the following script,
const glob = require('glob');
const fs = require('fs');
const path = require('path');
const gitUrl = 'https://github.com/user';
const author = `Mr. Github User <user#example.com> (${gitUrl})`;
const basePath = '/utility-scripts/tree/master';
const baseRepo = gitUrl + basePath;
glob('packages/*/package.json', (err, files) => {
for (const filePath of files) {
const [parent, pkg] = filePath.split('/');
const newData = {
author,
license: 'MIT',
repository: `${baseRepo}/${parent}/${pkg}`,
};
const data = Object.assign(
{},
JSON.parse(fs.readFileSync(path.resolve(filePath), 'utf-8')),
newData,
);
fs.writeFileSync(path.resolve(filePath), JSON.stringify(data, true, 2));
}
});
Is there an easy way to deal with this? With any kind of shell, git, yarn or npm command?
I'm using TypeScript 2.1.5.0. I've configured the grunt-typescript-using-tsconfig plugin as shown below but I get the error in the subject line when I execute the task.
The problem is the tsconfig.json property "files":[]. I didn't encounter this error when using gulp-typescript. Do you recommend that I configure something differently? Either my gruntfile.js for this plugin or tsconfig.json? Or can you recommend a different grunt plugin that will successfully hook into tsconfig.json and process the typescript task as expected?
typescriptUsingTsConfig: {
basic: {
options: {
rootDir: "./tsScripts"
}
}
}
Or can you recommend a different grunt plugin that will successfully hook into tsconfig.json and process the typescript task as expected?
gulp typescript supports tsconfig : https://github.com/ivogabe/gulp-typescript/#using-tsconfigjson
var tsProject = ts.createProject('tsconfig.json');
gulp.task('scripts', function() {
var tsResult = gulp.src(tsProject.src())
.pipe(tsProject());
return tsResult.js.pipe(gulp.dest('release'));
});
Try setting your Gruntfile.js configuration as shown in the following gist :
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
typescriptUsingTsConfig: {
basic: {
options: {
rootDir: './'
}
}
}
});
grunt.loadNpmTasks('grunt-typescript-using-tsconfig');
grunt.registerTask('default', [
'typescriptUsingTsConfig'
]);
};
Note the value for rootDir is set to ./ (i.e. The same folder as the Gruntfile.js).
tsconfig.json
Then ensure you have your tsconfig.json configured to include a list of all .ts files to be compiled to .js. For example:
{
"compilerOptions": {
"outDir": "./dist"
},
"files": [
"./tsScripts/a.ts",
"./tsScripts/b.ts",
"./tsScripts/c.ts"
]
}
There are of course other compiler options you can set in tsconfig.json
Directory structure
The configurations above assumes a directory structured as follows, however you can just adapt the code examples as required:
foo
├── Gruntfile.js
├── tsconfig.json
├── tsScripts
│ ├── a.ts
│ ├── b.ts
│ └── c.ts
└── node_modules
└── ...
Running grunt
cd to the project folder, (in these examples the one named foo), and run:
$ grunt
Output
Running grunt will create a folder named dist and output all .js files to it. For example:
foo
├── dist
│ ├── a.js
│ ├── b.js
│ └── c.js
└── ...
If you want the resultant .js files to be output to the same folder as the source .ts file, (i.e. not to the 'dist' folder), just exclude the "outDir": "./dist" part from your ts.config.json.
Some context here: It's not that I cannot use Webpack, it's that I do not want to use Webpack. I would like to keep everything as "vanilla" as possible.
Currently when creating modules in a project you have to require them using either a relative or absolute path, for example in the following directory..
project/
├── index.js
├── lib/
│ ├── network/
│ │ request.js
│ │ response.js
├── pages/
│ ├── foo.js
Considering we're in index.js we would import request via
var networkRequest = require('./lib/network/request.js')
and if we're in foo.js we would import request via
var networkRequest = require('../lib/network/request.js')
What I'm wondering is that if there's any way to perhaps, set a local alias in Package.json or anywhere else like so:
localPackages = [
{ name: 'network-request', path: './lib/network/request.js' }
];
In which you could just do
var networkRequest = require('network-request')
From any file and it will provide the correct path.
Yep, that's what npm link is for. Native and out of the box.
You can also set local paths in package.json
{
"name": "baz",
"dependencies": {
"bar": "file:../foo/bar"
}
}
I am trying to clear the cloudflare cache for single urls programmatically after put requests to a node.js api. I am using the https://github.com/cloudflare/node-cloudflare library, however I can't figure out how to log a callback from cloudflare. According to the test file in the same repo, the syntax should be something like this:
//client declaration:
t.context.cf = new CF({
key: 'deadbeef',
email: 'cloudflare#example.com',
h2: false
});
//invoke clearCache:
t.context.cf.deleteCache('1', {
files: [
'https://example.com/purge_url'
]
})
How can I read out the callback from this request?
I have tried the following in my own code:
client.deleteCache(process.env.CLOUDFLARE_ZONE, { "files": [url] }, function (data) {
console.log(`Cloudflare cache purged for: ${url}`);
console.log(`Callback:${data}`);
})
and:
client.deleteCache('1', {
files: [
'https://example.com/purge_url'
]
}).then(function(a,b){
console.log('helllllllooooooooo');
})
to no avail. :(
Purging Cloudflare cache by url:
var Cloudflare = require('cloudflare');
const { CF_EMAIL, CF_KEY, CF_ZONE } = process.env;
if (!CF_ZONE || !CF_EMAIL || !CF_KEY) {
throw new Error('you must provide env. variables: [CF_ZONE, CF_EMAIL, CF_KEY]');
}
const client = new Cloudflare({email: CF_EMAIL, key: CF_KEY});
const targetUrl = `https://example.com/purge_url`;
client.zones.purgeCache(CF_ZONE, { "files": [targetUrl] }).then(function (data) {
console.log(`Cloudflare cache purged for: ${targetUrl}`);
console.log(`Callback:`, data);
}, function (error) {
console.error(error);
});
You can lookup cloudflare zone this way:
client.zones.browse().then(function (zones) {
console.log(zones);
})
Don't forget to install the current client version:
npm i cloudflare#^2.4.1 --save-dev
I wrote a nodejs module to purge cache for a entire website. It scan your "public" folder, build the full url and purge it on cloudflare:
You can run it using npx:
npm install -g npx
npx purge-cloudflare-cache your#email.com your_cloudflare_key the_domain_zone https://your.website.com your/public/folder
But, you can install it and run using npm too:
npm install -g purge-cloudflare-cache
purge your#email.com your_cloudflare_key the_domain_zone https://your.website.com your/public/folder
For a public/folder tree like:
├── assets
│ ├── fonts
│ │ ├── roboto-regular.ttf
│ │ └── roboto.scss
│ ├── icon
│ │ └── favicon.ico
│ └── imgs
│ └── logo.png
├── build
│ ├── main.css
│ ├── main.js
├── index.html
It will purge cache for files:
https://your.website.com/index.html
https://your.website.com/build/main.css
https://your.website.com/build/main.js
https://your.website.com/assets/imgs/logo.png
https://your.website.com/assets/icon/favicon.ico
https://your.website.com/assets/fonts/roboto.css
https://your.website.com/assets/fonts/roboto-regular.ttf
This is probably happening because my mocha tests don't wait for the callback to return.
https://github.com/mochajs/mocha/issues/362