Expose express library to end users?

[pyrossh]

I would like to serve my build/dist folder for my static assets when developing/deploying to now or any server. For that I need to install express again and use the static function from there.
It would be great if graphql-yoga had this inbuilt for my static assets otherwise it would good enough to re-export the express library for public use.

This is what I'm doing now

import express from 'express';
server.express.use(express.static('dist'));

Something like this would be more easier,

import GraphQLYoga from 'graphql-yoga';
const { GraphQLServer, express } = GraphQLYoga;

const server = new GraphQLServer({ typeDefs, resolvers, options })
server.express.use(express.static('dist'));

else more like this,

const server = new GraphQLServer({ typeDefs, resolvers, options: {
  static: 'dist',
 }});

BTW Great library. I had the same amount of code throughout my projects. This unifies it and also the apollo-upload-server is a plus that too it got recently released too.

[orefalo]

+1

I like server.express.use(express.static('dist')); better.
more flexible

[schickling]

Hi @pyros2097, isn't what you suggested already possible?

[pyrossh]

I needed to install the express library and then use the static option from it. I understand the express server is exposed by the server but not the library. So I need to install express additionally to use say ... express.Router() if I needed to add a route or something like that.
That's why I made this change
https://github.com/pyros2097/graphql-yoga/blob/master/src/index.ts#L15
I just wanted it to be consistent on what express library I used.

[schickling]

Installing the express library is the way to go for now.

[kbrandwijk]

Yes, I saw that in the PR too. I agree with @schickling that if you need anything from express, you should add that dependency yourself, instead of having graphql-yoga export it.

[pyrossh]

Ok. I understand now. I just thought, that way we could make graphql-yoga a single dependency for all your server needs. Maybe that's now what graphql-yoga is trying to solve. Again it was just my reasoning. @kbrandwijk I initially followed that approach.

[geminiyellow]

hi all, is really can add static folder to yoga?

what i do is,

//**********************************************************
server.express.use(express.static(path.join(__dirname, '../client/build')));
// server.express.get('/', res => res.sendFile(path.join(__dirname, '../client/build/index.html')));
//**********************************************************

const options = {
  port: 3000,
  endpoint: '/graphql',
  subscriptions: '/subscriptions',
  playground: '/playground',
};
server.start(options, ({ port }) => console.log(`Server is running at http://localhost:${port}`));

when i add the static folder, i cannot access /playground and /graphql anymore.
who can tell me why ?

[pyrossh]

@geminiyellow I don't know if this is the right place to ask this question. But anyways the /graphql, /playground paths will get caught by the static middleware since it is a middleware.

You can try to mount the static assets to a path like this,
server.express.use('/build', express.static(path.join(__dirname, '../client/build')));
and then you will be able to access your assets from the build path like this /build/index.html

[geminiyellow]

@pyros2097 thank you

[corysimmons]

For anyone else stumbling upon this and wanting to have 1 app that serves both your backend and frontend, I suggest you do:

- backend
  - yoga.js
- frontend
  - react.js
- package.json
- server.js

// ./package.json
{
  "scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:frontend": "nodemon ./server.js", // catch-all routes --> your react app's index.html 
    "dev:backend": "nodemon ./backend/yoga.js"
  }
}

// ./server.js
const port = process.env.PORT || 5000
app.listen(port)
console.log(`./server.js: http://localhost:${port}`)

// ./backend/yoga.js
// ...
const port = 1337
server.start({ port }, () => console.log(`./backend/yoga.js: http://localhost:${port}`))

Replace "dev" scripts with "start", and nodemon with node, and this should work on Heroku as well.

The idea is Heroku can run 1 start script. Within that start script we're parallel running both servers (our generic Express app to catch-all towards React and our graphql-yoga app).

React will run on Heroku's default port so example.herokuapp.com will be your React app. Since your graphql-yoga server is on a different port, example.herokuapp.com:1337 will display your Playground.

[newtmex]

@geminiyellow this worked for me

// Serve static files
server.express.use(express.static(path.join(__dirname, '../client/build')));
// Serve other routes to index...typical for Angular frontend app
server.express.get('*', (req, res, next) => {
   // Handle graphql-yoga specific routes
   if(req.url == options.playground ||
    req.url == options.subscriptions ||
    req.url == options.endpoint) {
      // Return next() so that the GraphQLServer will handle it
      return next();
    }
   res.sendFile(path.join(__dirname, '../client/build/index.html'))
});

I know this issue is closed, but I felt like contributing a solution that worked for me.

[geminiyellow]

looks good

[balgamat]

@newtmex That feels like the correct way how to do this! Kudos!

[opensourcekam]

@newtmex Thank you!

[jamestrenda]

I don't fully understand the above solution, as I can't seem to get this working. I'm using next.js and apollo. How might I do this when using next.js as my front end framework?

[Jood80]

this worked for me

const { GraphQLServer } = require('graphql-yoga');
const serveStatic = require('serve-static');
const { join } = require('path');

const server = new GraphQLServer({ typeDefs, resolvers, options });
server.express.use(
  serveStatic(join(__dirname + '/../public/'), {
    cacheControl: false,
  }),
);

[Urigo]

Hey, @Urigo from The Guild here!

You might know us from projects such as graphql-code-generator, envelop or graphql-tools.

For a long time we thought that the Javascript ecosystem is still missing a lightweight cross-platform, but still highly customizable GraphQL Server.

In the past the awesome Prisma team took on that great challenge and now we are happy to announce that we are continuing them and just released GraphQL Yoga 2.0 - Build fast, extensible, and batteries-included (Subscriptions, Serverless, File uploads support) GraphQL APIs in Node.js 🚀

And regarding the issue here, Yoga is completely separated from the way you do HTTP, so you can easily use and expose anything to express but also use Yoga on many other environments and frameworks like Fastify, Cloudflare Workers, Lambdas and many more (you can find all of them in the docs)

We have been working a long time on version 2.0 and have been using it in our clients projects for a few months now and shared a couple of alpha cycles here.
Thank you all for your feedback and suggestions, you made this release possible!

Please try Yoga out again, give us feedback and help us spread the word on the new release!

• Announcement and blog post
• V2 Roadmap #704
• https://www.graphql-yoga.com/