Note: This post was written a while back but sat in draft. I’ve published this now, but I’m not sure it’s relevant to the latest versions etc. so please bear this in mind.
This is a simple reminder post for myself, please see cors for complete documentation.
To enable CORS within expressjs, add the package
yarn add cors
The import using
import cors from "cors";
and now to use cors within the middleware we use
var server = express() server.use(cors());
You may want to turn on compression within your express service(s) in which case simply run
yarn add compression
and we just need to add to our server code like this
import express from "express";
import compression from "compression";
const app = express();
const server = http.createServer(app);
app.use(compression());
const port = 4000;
server.listen(port,
() => console.log(`Server on port ${port}`)
);
Now, in many case you’ll possibly already have the client header including the following
Accept-Encoding: gzip, compress, br
or you can set the headers yourself and express will serve up gzip compressed responses.
Remember though, that compression happens based upon reading an amount of data before starting to stream/send the response, so small(ish) amounts of data will not benefit from any performance increases, whereas large amounts of data will by the very nature of compression, reduce the amount of data being transferred and therefore you should see a performance increase.
See also Compression in HTTP.
If we need to handle CORS within Express, we can simply write the following (we’ll assume you’ve also added express to your packages)
Now our usual Express code with the addition of CORS support
import express from "express";
import cors from "cors";
const app = express();
const server = http.createServer(app);
app.use(cors());
const port = 4000;
server.listen(port,
() => console.log(`Server on port ${port}`)
);
In the previous two posts, we firstly create a basic server, then extended this with REST functionality, now lets add GraphQL capabilities.
First off, run the following
With the schema folder add a new file userSchema.ts with the following code
import { buildSchema } from "graphql";
export const schema = buildSchema(`
type User {
firstName: String
lastName: String
}
type Query {
users: [User]
}
`);
In the above code, we create a GraphQL schema based upon our User type, along with the type Query for us to use the User type.
Next we’ll create a folder named resolvers along with the file userResolver.ts. GraphQL uses resolvers to interact with the data via GraphQL (like the code in the indexController in the previous post).
import { stubData } from "../models/user";
export const userResolver = {
users: () => {
return stubData;
}
}
Now let’s update the server.ts file by adding the GraphQL code, I’ll include the whole file here (at least the specifics for GraphQL)
import graphqlHTTP from "express-graphql";
import { schema } from "./schema/userSchema";
import { userResolver } from "./resolvers/userResolver";
const server = express();
server.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: userResolver,
graphiql: true,
}));
const port = 4000;
server.listen(port,
() => console.log(`Server on port ${port}`)
);
In the above we’ve specified graphiql: true which allows us to via the GraphIQL page using http://localhost:4000/graphql
Now if you type the following into the left hand (query) pane
{
users {
firstName
lastName
}
}
Running this from GraphIQL should output all our stubData.
We’ve essentially got the users method from our original code but now let’s add the equivalent of the create method, which in GraphQL terms is a mutation type.
In the userSchema.ts file, change the schema to look like this
export const schema = buildSchema(`
type User {
firstName: String
lastName: String
}
input UserInput {
firstName: String
lastName: String
}
type Mutation {
create(user: UserInput): User
}
type Query {
users: [User]
}
`);
We’ve added an input type UserInput along with the type Mutation. Next, within the userResolve.ts file change the userResolve to add the create function, as below
export const userResolver = {
users: () => {
return stubData;
},
create: (data: any) => {
stubData.push(new User(data.user.firstName, data.user.lastName));
return data.user;
}
}
Let’s test this code by executing the following query via GraphIQL
mutation {
create(user: {
firstName: "Miner",
lastName: "FortyNiner",
}) {
firstName
lastName
}
}
In my previous post I showed how to create an Express server in TypeScript. Let’s now extend things…
To start with, create some folders (the names are not important, in that this is not using convention based folder names). We’re going to set things up in a similar way to I’ve done for C# and Java…
Create a file server.ts in the root folder. Here’s the code from the previous post plus some extras
import express from "express";
import bodyParser from "body-parser";
const server = express();
server.use(bodyParser.json());
server.get("/", (request, response) => {
response.send("<h1>Hello World</h1>");
});
const port = 4000;
server.listen(port,
() => console.log(`Server on port ${port}`)
);
The body-parser exposes middleware etc. in this case we’re adding the ability to work with JSON content type.
Now let’s change the existing route / and add some more, below is the additional code required in server.ts
import * as indexController from "./controllers/indexController";
server.get('/', indexController.index);
server.get('/users', indexController.users);
server.get('/users/create', indexController.create);
// POST implementation
// server.post('/users/create', indexController.create);
We now need to implement the model and the controller, so starting with the model, create the file user.ts within the models folder and it should look like this
export default class User {
constructor(public firstName: string, public lastName: string) {
}
}
export const stubData = [
new User('Scooby', 'Doo'),
new User('Fred', 'Jones'),
new User('Velma', 'Dinkley'),
new User('Daphne', 'Blake'),
new User('Shaggy', 'Rogers'),
];
The stubData ofcourse is just here to give us some data to start things off.
In the controllers folder, add a new file named indexController.ts and the file should look like this
import { Request, Response } from "express";
import User, { stubData } from '../models/user';
export const index = (req: Request, res: Response) => {
res.send("<h1>Methods are</h1><ul><li>users</li><li>create</li></ul>")
};
export const users = (req: Request, res: Response) => {
res.json(stubData);
};
export const create = (req: Request, res: Response) => {
const newUser = new User(req.query.firstName, req.query.lastName);
stubData.push(newUser);
res.json(newUser);
};
// POST implementation
// export const create = (req: Request, res: Response) => {
// const newUser = new User(req.body.firstName, req.body.lastName);
// stubData.push(newUser);
// res.json(newUser);
// };
The scripts for package.json should also be taken from the previous post.
If you now run yarn build then yarn start your server will be up and running. Using the following URL’s
will result in, the first URL returning a simple help screen using HTML, the second will list the current array of users using JSON and finally the third URL will create a new user, the response will show the new user as JSON, but if you call the users method again you will see the newly added user.
I’ve also listed the POST implementations which you’d probably more likely use for mutations, but the GET implementations are fine in this instance and easier to test via our preferred browser.
Express is a popular web application server in JavaScript.
Let’s create a really quick and simple expression server which will be a good starting point for further posts which use this library.
I’ll assume you’ve created a folder, run yarn init and tsc –init, next up run
"scripts": {
"build": "tsc",
"start": "node server.js"
}
The code to run up a really simple server is as follows
import express from "express";
const server = express();
server.get("/", (request, response) => {
response.send("<h1>Hello World</h1>");
});
const port = 4000;
server.listen(port,
() => console.log(`Server on port ${port}`)
);
Using our scripts, run yarn build followed by yarn start. The server should start on port 4000, so now navigate to http://localhost:4000 using your preferred browser and that’s it.
We’ve created a server instance on port 4000, we’re routed any root (i.e. /) calls to the response, which in this case returns a simple HTML string.