ExpressJS in a TypeScript class - express

All ExpressJS and TypeScript examples I could find use
import * as express from "express";
let app = express();
app.use("/", express.static("/"));
However, I want to use the class approach:
import * as express from "express";
export class ServerApp {
private app: express.Express = express();
public configure {
this.app.use('/', express.static("/");
}
}
Trying to access the use method on the private variable gives an argument type warning.
I want to use strong typing so private app: any will not work. How can I solve this problem, or is there a better approach?

According to the latest express typings, the type for app is called Application, not Express. The following file test.ts compiles just fine
import * as express from "express";
export class ServerApp {
private app: express.Application = express();
public configure() {
this.app.use('/', express.static("/"));
}
}
if you put it in an empty directory and do
npm install typescript
npm install typings
./node_modules/.bin/typings install -G dt~node
./node_modules/.bin/typings install express
./node_modules/.bin/tsc test.ts typings/index.d.ts
it will work.
However, there is more than one way to install typings for express. If you don't need compatiblity with typescript < 2.0 (2.0 was released a few days ago), you can just
npm install typescript
npm install #types/express
./node_modules/.bin/tsc test.ts
and again it will work. If you look at installed types-metadata.json for express-serve-static-core, you notice that it uses types-2.0 branch of DefinitelyTyped:
"sourceRepoURL": "https://www.github.com/DefinitelyTyped/DefinitelyTyped",
"sourceBranch": "types-2.0",
The third way to install is
../node_modules/.bin/typings install -G dt~express
this will take it from the main branch of DefinitelyTyped, which, as #Aphelion discovered, contains problematic commit that removes a number of use overloads, causing the error in question.

Related

How to load multiple apps with vue devServer configuration

Hi i have a app called Home which has installable plugins which i can install at any point of time which runs in iframe
<Home /home/user/mainprojects/index.html> <-- Home app
<Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
<Bed /iframe>
</Home>
with this nginx setup i'm able to load the plugin app(Bed) with after build(which is heavy time consuming)
here is nginx setup for that
location / {
alias /home/user/mainprojects/dist/;
index index.html;
}
location /Bed {
alias /home/user/plugins/bed/dist/;
index index.html index.htm;
}
Question: i don't want to build main app Home app i want to run it through serve, but second app i,e plugin i will always build which will be available as bundle. with above nginx setup after building both(i,e npm run build, bundle) it will work fine. i want to avoid main app build.
here is how my vue.config.js will look like
module.exports = {
devServer:{
proxy:{
'^/appReplacer':{
target: 'http://100.148.1.9:9003/',
changeOrigin:true,
logLevel:'debug',
pathRewrite: {'^/appReplacer':'/'}
}
}
}
}
Still looking for a solution..
Please help me thanks in advance !!
Assuming you are using Vue CLI v4 which is based on Webpack 4
Webpack DevServer is based on Express framework and allows to setup custom Express middleware using devServer.before option
This way you can configure any path to serve virtually anything you want. For example use the static middleware to serve some static files (dist of your plugin in this case)
Note that following code depends heavily on version of Vue CLI in use. Current release version of Vue CLI 4.5.15 is using "webpack-dev-server": "^3.11.0" which uses "express": "^4.17.1"
// vue.config.js
// express should be installed as it is used by webpack-dev-server
const express = require('express');
module.exports = {
//...
devServer: {
before: function(app, server, compiler) {
app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
}
}
};

Can I get a webpack resolve alias working on android with expo?

I'm trying to get a preact library to work with expo/react-native
It works find on web using this alias in webpack:
// webpack.config.js
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function(env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.resolve.alias = {
...config.resolve.alias,
'preact': 'react'
}
return config;
};
But on android I get an error: Unable to resolve "preact" from "node_modules/.../....
Does anyone know how to get the same kind of alias working outside of web?
I was unable to find a solution where webpack's alias was usable outside of Web on Android. I needed it on account of the typical invalid Hook call caused by duplicate React modules being used.
Supposedly Yarn workspaces might fix this as well but I couldn't get that working.
The solution I found and was mildly painless was to update my local libraries' devDependencies so they all use the same React module being used in the main project's dependencies.
- app
|
|-- package.json dependency: "react":"18.1.0"
- local_library
|
|-- package.json devDependency:
"react": "file:../../../node_modules/react",

Error in console with Vue-chartJS and Webpack

I installed vue-chartjs and also added chart.js both using NPM
When I run npm start my server is started but in broswer console i get an error
TypeError: __WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Doughnut.extend is not a function
I'm not sure what this mean. I reinstalled all packages also installed this packages separete using npm install vue-chartjs
Can you show your code of your component? Webpack 3 ?
With vue-chartjs version 3 you have to create your components this way:
import {Doughnut} from 'vue-chartjs
export default {
extends: Doughnut,
mounted () {
this.renderChart(data, options)
}
}

Importing an ES6 module using jspm & using in Aurelia

I'm trying to use the querystring package in an Aurelia application but getting Cannot read property 'stringify' of undefined error in the browser console.
These are the steps I took:
Install using jspm install querystring
Add import {querystring} from 'querystring' into the Aurelia model
Use in my model like so:
import {querystring} from 'querystring';
export class App {
criteria_words;
criteria_location;
constructor() {
}
submit() {
console.log(querystring.stringify(this));
}
}
What step am I missing?
First, jspm install querystring will not install the library that you have mentioned. The command that you should run is this:
jspm install npm:qs
Then, you can import and use it like this:
import querystring from 'qs';
// call querystring.stringify(someObject);
Or
import {stringify} from 'qs';
// call stringify(someObject);

Yeoman custom generator not loading dependencies from package.json

I've created a Yeoman custom generator. Within the index.js file I want to perform some text replacement on some files. In package.json I have added the dependency replace then when I require('replace') in index.js and run the generator, I get the error Cannot find module 'replace'. I have tried different modules from NPM and running the generator fails for all of them - it fails to find the module.
The appropriate part of package.json
"dependencies": {
"replace": "~0.2.9",
"yeoman-generator": "~0.16.0",
"chalk": "~0.4.0"
},
Start of index.js
'use strict';
var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var chalk = require('chalk');
var replace = require('replace');
var MyGenerator = yeoman.generators.Base.extend({
init: function () {
this.pkg = require('../package.json');
The generator fails when it hits the Replace require. Chalk and Yeoman Generator don't fail and they're loaded in the same way.
Why don't my added modules load?
Did you run npm install after manually adding that line to package.json? The preferred way to install a package is by running: npm install --save _package_. It will download the latest release, and save it to your package.json.