Warning: error TS18002: The 'files' list in config file is empty - node.js

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.

Related

Setting up html report with Jasmine

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

How to get the path to a file outside the root folder in React application

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})
}

Webpack 2 won't compile a single typescript file

I'm on a project where I have multiple SPA on Angular JS, all written in typescript. I have the following directory structure:
src/
├── app
│ ├── frontend
│ │ ├── ...
│ │ └── frontend.module.ts
│ ├── backend
│ │ ├── ...
│ │ └── backend.module.ts
├── app.frontend.module.ts
├── app.backend.module.ts
Files at the root of src/ are the entry point for each app, they contain the following code (here for the frontend):
import * as angular from "angular";
import { FrontendModuleName } from './app/frontend/frontend.module';
angular.module('app', [FrontendModuleName]);
angular.bootstrap(document, ['app'], {
strictDi: true
});
So I should be able to tell Webpack to compile "src/app.frontend.module.ts", the compiler then follows the imports and everything gets merged nicely.
It works fine, but even if I explicitly tell Webpack to compile a single file, all of them are always compiled.
To give you an example, let's take this very basic configuration:
const path = require('path');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
frontend: './app.frontend.module.ts',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
loaders: [
{
test: /\.ts(x?)$/,
loaders: ['ts-loader']
}
]
}
};
Executing this will compile app.frontend.module.ts as requested BUT also app.backend.module.ts !
After some time I found out that it's not Webpack but the Typescript compiler who seems at fault, so I changed my .tsconfig to try to exclude the root files, like so :
{
"compilerOptions": {
...
},
"exclude": [
"node_modules",
"dist",
"dev",
"reports",
"./src/app.*.module.ts"
]
}
In a sense it works because it now ignores app.backend.module.ts, but it still tries to compile every .ts file in the src/app/backend/ directory!
That's where I am right now.. I've searched in the compiler options reference but didn't found any option to prevent the compiler to recursively compile everything.
In fact..
..I've found a very very ugly workaround that I don't find satisfying at all. There is the files options that can be used to specify what files should be compiled, but I cannot give it an empty array or an exception is thrown.
So I created an empty dummy.ts file in the src/ folder and it seems to work as expected:
{
"compilerOptions": {
...
},
"files": ["src/dummy.ts"],
"exclude": [
"node_modules",
"dist",
"dev",
"reports",
"./src/app.*.module.ts"
]
}
But I can't imagine there is no better way to handle this.
Any idea would be much appreciated.
Thanks for your help.

Aliasing modules using NodeJS

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"
}
}

clearing cloudflare cache programmatically

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

Resources