So basically I have an Express API that I've been working on and recently I got the idea to implement a documentation for it. I chose Swagger and JSDoc to do this as it is quick and easy. However the documentation won't work. Here is how I've implemented it so far.
docs.ts:
import swaggerJSDoc, { Options } from "swagger-jsdoc";
const swaggerOptions: Options = {
definition: {
info: {
title: "Project Nonya Documentation.",
description: "Documentation for the Project Nonya API",
contact: {
name: "Joe Mama",
},
version: "6.9.0",
},
},
apis: ["./routes/*.routes.ts"],
};
export const swaggerDocs = swaggerJSDoc(swaggerOptions);
router.ts:
...
import swaggerUi from "swagger-ui-express";
import { swaggerDocs } from "./docs";
...
app.use("/api/documentation", swaggerUi.serve, swaggerUi.setup(swaggerDocs));
...
When I got to the docs endpoint, the documentation does appear, however its keeps saying No Operations defined in spec!. Here is one of the files in the routes folder.
testing.routes.ts:
import express, { Router } from "express";
import { testing} from "../controllers/testing/testing.controller";
const router: Router = express.Router();
/**
* #swagger
* /:
* get:
* description: Why you no work?
* responses:
* 200:
* description: Returns nothing cause this shit won't work.
*/
router.post("/testing/:id", testing);
export default router;
What am I doing wrong? I can't figure it out. The directories are like this: src/docs.ts, src/router.ts, and src/routes/testing.router.ts.
Side Question
Since I am using TypeScript, I obviously have to compile the code into JavaScript. However in the apis array in docs.ts, I specify files with a *.routes.ts. Would I have to change this to *routes.js.
Thank You!
Found this Github issue to be the solution to my problem.
https://github.com/Surnet/swagger-jsdoc/issues/150
Related
I want upload a file with evaporate.js and crypto-js using x-amz-security-token:
import * as Evaporate from 'evaporate';
import * as crypto from "crypto-js";
Evaporate.create({
aws_key: <ACCESS_KEY>,
bucket: 'my-bucket',
awsRegion: 'eu-west',
computeContentMd5: true,
cryptoMd5Method: data => crypto.algo.MD5.create().update(String.fromCharCode.apply(null, new Uint32Array(data))).finalize().toString(crypto.enc.Base64),
cryptoHexEncodedHash256: (data) => crypto.algo.SHA256.create().update(data as string).finalize().toString(crypto.enc.Hex),
logging: true,
maxConcurrentParts: 5,
customAuthMethod: (signParams: object, signHeaders: object, stringToSign: string, signatureDateTime: string, canonicalRequest: string): Promise<string> => {
const stringToSignDecoded = decodeURIComponent(stringToSign)
const requestScope = stringToSignDecoded.split("\n")[2];
const [date, region, service, signatureType] = requestScope.split("/");
const round1 = crypto.HmacSHA256(`AWS4${signParams['secret_key']}`, date);
const round2 = crypto.HmacSHA256(round1, region);
const round3 = crypto.HmacSHA256(round2, service);
const round4 = crypto.HmacSHA256(round3, signatureType);
const final = crypto.HmacSHA256(round4, stringToSignDecoded);
return Promise.resolve(final.toString(crypto.enc.Hex));
},
signParams: { secretKey: <SECRET_KEY> },
partSize: 1024 * 1024 * 6
}).then((evaporate) => {
evaporate.add({
name: 'my-key',
file: file, // file from <input type="file" />
xAmzHeadersCommon: { 'x-amz-security-token': <SECURITY_TOKEN> },
xAmzHeadersAtInitiate: { 'x-amz-security-token': <SECURITY_TOKEN> },
}).then(() => console.log('complete'));
},
(error) => console.error(error)
);
but it produce this output
AWS Code: SignatureDoesNotMatch, Message:The request signature we calculated does not match the signature you provided. Check your key and signing method.status:403
What I'm doing wrong
SIDE NOTE
This is the versione I'm using on browser side:
{
"crypto-js": "^4.1.1",
"evaporate": "^2.1.4"
}
You have your crypto.HmacSHA256 parameters reversed. They should all be the other way around. I've been bashing my head against a wall trying to get evaporate 2.x to work for the last week, it's been very frustrating.
I tried your code above and looked over all the docs and forum posts related to this, and I think using Cognito for this auth just doesn't work or isn't obvious how it's supposed to work, even though the AWS docs suggest it's possible.
In the end I went with using Lambda authentication and finally got it working after seeing much misinformation about how to use various crypto libraries to sign this stuff. I got it working last night after rigorously examining every bit of what was going on. Reading the docs also helped get me on the right path as to how the crypto needs to work, it gives example inputs and outputs so you can test for sure that your crypto methods are working as AWS expects them to work:
https://docs.aws.amazon.com/general/latest/gr/sigv4_signing.html
Tasks 1, 2 and 3 are especially important to read and understand.
I am working on a project on my Windows computer as well on my Macbook. I got a function that register components defined in certain directories globally like this:
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
/**
* Third-party imports.
*/
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
/**
* Register components from the ./components and ./components/core
* directories. This way these components don't have to be imported
* manually every time.
*
* The core components are the core of other components and contains
* alerts, notifications, input fields etc.
*
* Base components are bigger components made upon the core components
* and contain a combination of one or more of the core components. These
* are usually components that contain a lot of code and have to be re-used
* across the whole application.
*
* #param {Vue instance} app
*/
function registerGlobalComponents (app) {
const requireComponent = require.context(
'./components' || './components/core' || './components/base',
true,
/\.vue$/
);
for (const file of requireComponent.keys()) {
const componentConfig = requireComponent(file);
const name = file
.replace(/index.js/, '')
.replace(/^\.\//, '')
.replace(/\.\w+$/, '');
const componentName = upperFirst(camelCase(name));
app.component(componentName,
componentConfig.default);
}
}
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
const inertiaApp = createApp({ render: () => h(app, props) });
inertiaApp.use(plugin);
inertiaApp.mixin({ methods: { route } })
registerGlobalComponents(inertiaApp);
inertiaApp.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
When I run npm run watch or dev or prod it compiles the code and successfully shows me the website on my Windows machine. But when I do this on my Macbook it throws the following error:
Can't resolve './components' in '/Users/bas/Sites/trainfit/resources/js'
Is there a reason why this works on a Windows machine but not on a machine that runs on MacOS?
Some more information about my project:
Made with Vue and Inertiajs
Running this code from Visual Studio Code
As explained in the docs, you start by creating a jsconfig.json file in your root with these characters and symbols in it:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
You can find examples and references here : - here
I am using the following minimal probot app and try to write Mocha unit tests for it.
Unfortunately, it results in the error below, which indicates that some of my setup for the private key or security tokens is not picked up.
I assume that the configuration with my .env file is correct since I do not get the same error when I start the probot via probot-run.js.
Are there any extra steps needed to configure probot when used with Mocha?
Any suggestions on why the use of the scheduler extension may result in such issue would be great.
Code and error below:
app.ts
import createScheduler from "probot-scheduler";
import { Application } from "probot";
export = (app: Application) => {
createScheduler(app, {
delay: !!process.env.DISABLE_DELAY, // delay is enabled on first run
interval: 24 * 60 * 60 * 1000 // 1 day
});
app.on("schedule.repository", async function (context) {
app.log.info("schedule.repository");
const result = await context.github.pullRequests.list({owner: "owner", repo: "test"});
app.log.info(result);
});
};
test.ts
import createApp from "../src/app";
import nock from "nock";
import { Probot } from "probot";
nock.disableNetConnect();
describe("my scenario", function() {
let probot: Probot;
beforeEach(function() {
probot = new Probot({});
const app = probot.load(createApp);
});
it("basic feature", async function() {
await probot.receive({name: "schedule.repository", payload: {action: "foo"}});
});
});
This unfortunately results in the following error:
Error: secretOrPrivateKey must have a value
at Object.module.exports [as sign] (node_modules/jsonwebtoken/sign.js:101:20)
at Application.app (node_modules/probot/lib/github-app.js:15:39)
at Application.<anonymous> (node_modules/probot/lib/application.js:260:72)
at step (node_modules/probot/lib/application.js:40:23)
at Object.next (node_modules/probot/lib/application.js:21:53)
Turns out that new Probot({}); as suggested in the documentation initializes the Probot object without any parameters (the given options object {} is empty after all).
To avoid the error, one can provide the information manually:
new Probot({
cert: "...",
secret: "...",
id: 12345
});
I am new to using Ember and have been following an online video tutorial (see weblink below, though its dated as it uses .NET Core 1.0) that demonstrates how to setup a JSON API back-end with an Ember front-end - I am using Visual Studio Code. I have successfully completed the first video and receive responses from the JSON API back-end. However, I am unable to get the second video working by having Ember send a request to the api-back end for data retrieval. I know this because I am monitoring the calls to the server. So, while I can hit the back-end server and receive a JSON response, the front-end response is HTTP Error 404 - page not found and there is no request to the back-end.
HTTP Error:
Error: Ember Data Request GET /todo-items returned a 404
Payload (text/html; charset=utf-8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /todo-items</pre>
</body>
</html>
My best guess is that changes have been made to .NET Core and Ember with respect to routing that are not covered in the videos. Unfortunately, a 404 error is very little to go on and I am unable to find the problem. Does anybody know where the problem is or how I can troubleshoot this?
Video tutorial: https://www.youtube.com/watch?v=_d53rG2i9pY&index=2&list=PLu4Bq53iqJJAo1RF0TY4Q5qCG7n9AqSZf
router.js
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('todo-items');
});
export default Router;
environment.js
'use strict';
module.exports = function(environment) {
let ENV = {
modulePrefix: 'todo-list-client',
environment,
rootURL: '/',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
},
EXTEND_PROTOTYPES: {
// Prevent Ember Data from overriding Date.parse.
Date: false
}
},
APP: {
host: 'http://localhost:5000',
namespace: 'api/v1'
}
};
if (environment === 'development') {
// ENV.APP.LOG_RESOLVER = true;
// ENV.APP.LOG_ACTIVE_GENERATION = true;
// ENV.APP.LOG_TRANSITIONS = true;
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
// ENV.APP.LOG_VIEW_LOOKUPS = true;
}
if (environment === 'test') {
// Testem prefers this...
ENV.locationType = 'none';
// keep test console output quieter
ENV.APP.LOG_ACTIVE_GENERATION = false;
ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
ENV.APP.autoboot = false;
}
if (environment === 'production') {
// here you can enable a production-specific feature
}
return ENV;
};
application.js
import DS from 'ember-data';
import ENV from './config/environment';
export default DS.JSONAPIAdapter.extend({
namespace: ENV.APP.namespace,
host: ENV.APP.host
})
todo-items.js
import Route from '#ember/routing/route';
export default Route.extend({
model(){
return this.store.findAll('todo-item');
}
});
Model Files:
todo-item.js
import DS from 'ember-data';
const { attr, belongsTo} = DS;
export default DS.Model.extend({
description: attr('string'),
owner: belongsTo('person')
});
person.js
import DS from 'ember-data';
const { attr, hasMany} = DS;
export default DS.Model.extend({
firstName: attr('string'),
lastName: attr('string'),
todoItems: hasMany('todo-item')
});
UPDATE 1:
API server is running on port 5000 while Ember is running on 4200.
API URL call: http://localhost:5000/api/v1/people
Ember URL call: http://localhost:4200/todo-items
Update 2
Server messages:
API: Now listening on: http://localhost:5000
Ember: Serving on http://localhost:4200/
Do you run ember serve with the proxy parameter pointing to your backend?
Try to run this in your terminal:
ember s -pr=http://localhost:5000
then your requests should go to the right endpoint.
I found the problem. I needed to setup CORS.
I'm in the process of upgrading an AngularJS v1.5 project to Angular 4.x. During development of the original AngularJS application, we would use the ngMocks package to simulate actual web service API responses, and display the data accordingly on the page. This was incredibly helpful during development as I didn't have to hard-code values for removal later on. Best of all, we configured Webpack to only include the mock data during development, and ignore those mock data files when building our application for production use. The mock data was configured like this:
/* app-login.mock.js */
import angular from 'angular';
import 'angular-mocks';
angular.module('app').run(function ($httpBackend) {
$httpBackend
.whenPOST('./api/auth')
.respond(function(method, url, data) {
var credentials = angular.fromJson(data);
if (credentials.username == 'gooduser') {
return [200, {'token': createToken(credentials.username)}];
} else {
return [401, {'errorMsg': 'Mock login only allows username "gooduser"'}];
}
});
});
function createToken(username) {
// Create a token, which is valid enough for testing purposes.
// This token is based on the actual token generated by the web service.
let currentTime = new Date();
let futureTime = new Date(currentTime.getTime() + ((currentTime.getHours() + 8) * 60 * 60 * 1000));
let header = {
alg: 'HS512'
};
let payload = {
exp: futureTime.getTime() / 1000,
sub: username,
roles: 'SOME_APPLICATION_ROLES',
iat: currentTime.getTime() / 1000
};
return `${btoa(angular.toJson(header))}.${btoa(angular.toJson(payload))}`;
}
Webpack was then configured to include all "mock" files into the built bundle, which could then be displayed as if it were a real HTTP response.
/* webpack.config.js */
const isProd = process.env.NODE_ENV === 'production';
const entry = {
app: (() => {
let app = [
'babel-polyfill',
path.join(PATHS.app, 'pollyfills.ts'),
path.join(PATHS.app, 'main.ts')
];
if (isProd) {
app.push(path.join(PATHS.app, 'app.prod.js'));
} else {
app.push(path.join(PATHS.app, 'app.mock.js'));
}
return app;
})()
};
module.exports = {
entry,
// ...other exports
};
And then the app.mock.js file:
/* app.mock.js */
var mockContext = require.context(".", true, /\.mock$/);
mockContext.keys().forEach(mockContext);
I've scoured the internet looking for a solution that works just as well as our old one, though I haven't come up with any good answers. Best I've found are tutorials on how to set up Unit Tests that return mock data, and while that's useful for testing functionality it doesn't help me test the application during the development process.
I also have seen some documentation on setting up Interceptors using the new HttpClient class found within Angular 4, but I'm not sure how to add it to our Webpack configuration under the condition of only being allowed during development. Does anyone have any advice on what to do?
I use the angular-in-memory-web-api. You can find it here: https://github.com/angular/in-memory-web-api
UPDATE: The repo was moved here, within the angular/angular repo: https://github.com/angular/angular/tree/e0dfa42d6e656124f3c3d78e178b1bf091b38e79/packages/misc/angular-in-memory-web-api
It intercepts all of your http calls and works with sample data you provide.
To change from dev to production, you need to remove the imports. Or you could possibly write two different modules, one with the dev imports and one with the production imports and include one or the other with webpack similar to what you do now. (But I have not tried this.)
You set up your data like this:
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { IProduct } from './product';
export class ProductData implements InMemoryDbService {
createDb() {
let products: IProduct[] = [
{
'id': 1,
'productName': 'Leaf Rake',
'productCode': 'GDN-0011',
'releaseDate': 'March 19, 2016',
'description': 'Leaf rake with 48-inch wooden handle.',
'price': 19.95,
'starRating': 3.2,
'imageUrl': 'http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png',
'tags': ['rake', 'leaf', 'yard', 'home']
},
// ...
];
return { products };
}
}
And you build your data access service using the normal Http or HttpClient.
I have a full example with all CRUD operations here: https://github.com/DeborahK/Angular2-ReactiveForms