Secure a graphql express endpoint with the HTTPS protocol utilizing webpack as a proxy

I am currently in the process of developing an application using webpack, express, and graphql. The setup involves Express serving the express-graphql endpoint, which is then proxied by webpack-dev-server. My main concern at the moment is figuring out how to implement https for that particular endpoint.

Although I have some experience with express and webpack, my knowledge on ssl is quite limited. I find myself unsure of whether the focus should be on securing the proxy, the express server, or the express-graphql endpoint itself.

In addition to this, I have successfully integrated user authentication using auth0.

server.js

import express from 'express';
import graphQLHTTP from 'express-graphql';
import jwt from 'express-jwt';
import path from 'path';
import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import {Schema} from './data/schema';

const APP_PORT = process.env.PORT || 3000;
const GRAPHQL_PORT = 8080;
const AUTH0_ID = process.env.AUTH0_ID;
const AUTH0_SECRET = process.env.AUTH0_SECRET;

const authenticate = jwt({
  secret: new Buffer(AUTH0_SECRET, 'base64'),
  audience: AUTH0_ID,
});

// Expose a GraphQL endpoint
const graphQLServer = express();
graphQLServer.use('/', authenticate, graphQLHTTP(request => ({
  graphiql: true,
  pretty: true,
  schema: Schema,
  rootValue: { user: request.user },
})));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
  `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}`
));

// Serve the Relay app
...

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/app/',
  stats: {colors: true, chunks: false},
});

// Handle incoming routes
app.use('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/public/index.html'));
});

app.listen(APP_PORT, () => {
  console.log(`App is now running on http://localhost:${APP_PORT}`);
});

Answer №1

In my opinion, it is crucial to secure the endpoint that is accessible to the public. While using webpack dev server in a production environment may not be ideal, if you find the need to implement https, webpack dev server does offer a way to support it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for updating an anchor link within a Textarea using jQuery

I have a simple inquiry about jQuery. I am interested in changing the "a" tag within a Textarea. I understand that "a" tags do not work within a textarea, which makes it impossible to target them with jQuery selectors. For example: <textarea><a ...

Utilizing Node.js with Redis for organizing data efficiently

Currently, I am in the process of configuring a Redis cache system for storing incoming JSON data in a specific format. My goal is to create an ordered list structure to accommodate the large volume of data that will be stored before eventual deletion. Th ...

tabs that are vertical without the use of jQuery UI

I'm feeling a bit lost because I can't seem to find any examples or tutorials for vertical or side tabbed content. I want the tabs to be on the left side, but all my searches online have come up empty. Maybe I'm not using the right search te ...

Having trouble importing components within my router.js file in VueJS

Trying to work with the vue-router, but encountering difficulty importing components into the router.js. Received a warning: [Vue Router warn]: No match found for location with path "/" In need of assistance as I'm unsure of what mistake I ...

Is it possible to transfer request variables from .param to .use method?

In the following code snippet, I am attempting to log req.hash_id from middleware, but it is displaying as undefined. Is there a way that I can resolve this issue? Alternatively, is there a straightforward method to extract ":hash" within the regular .us ...

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

"Encountered difficulty reading the data from the downloaded blob due to a problem

How can I check the internal buffer to see if my text data is present? Am I using node.js' Stream.read() correctly? I have a text file stored as a blob on azure-storage. After downloading the blob, I receive a readable stream along with information a ...

What methods can be used to center a Google map on a specific location?

I am facing an issue with three map canvases on different divs. Despite setting the center to the same position in all three of them using JavaScript, the second and third maps do not seem to reflect that center. Does anyone have any insights on what cou ...

Can someone provide a list of events for the .on function in Vanilla NodeJS?

Currently experimenting with NodeJS by testing basic backend functionalities like sending various HTTP requests from my index.html file to the server.js file. I plan to delve into Express soon. I've noticed a lack of documentation on NodeJS 'eve ...

Issues with expected identifiers and type mismatch errors encountered when defining a TypeScript class

As someone who is still relatively new to coding, I am facing a challenge while trying to create a TypeScript class within an Angular project that is based on a complex JSON file. The issue arises from the way the properties were defined in the JSON using ...

JavaScript is refusing to display content on the webpage

I have encountered an issue while working on a repository page where I am using both PHP and JavaScript. The table I am generating through jQuery seems to not be writing to the page, even though all the console logs are functioning properly. Currently, th ...

The submission form is being triggered immediately upon the page loading

I have a form on the landing page that sends parameters to Vuex actions. It functions correctly when I click the submit button and redirects me to the next page as expected. However, there seems to be a problem. Whenever I open or refresh the page, the par ...

Keeping track of various combinations of a string containing only certain characters

Currently, I am working on a project that involves replacing letters of the alphabet with numbers resembling similar styles in typescript. For example, converting the letter 'I' to '1'. I have successfully implemented a function called ...

Adding a custom script with wp_enqueue_script() upon form submission: Steps and guidelines

Currently, I'm working on a WordPress plugin that allows users to input inline scripts in a text-area on the plugin settings page, and then save it. My goal is to grab the submitted script and enqueue it in the header/footer of the theme. I've ...

Expressjs operates in a non-sequential manner, rendering function returns ineffective

I am new to node/express js and facing an issue while executing the code. The control seems to execute the lines after calling the function "var nextVersion =getNextContractVersion(cid)" before the function returns a response. This results in the value for ...

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Dear Fellow Coders, Could anyone lend a hand? I encountered this issue on my website after uploading it to my FTP: "Resource interpreted as Stylesheet but transferred with MIME type text/plain" </head> <body> <div class= "navbar navbar ...

A guide on combining objects into an array using loops in JavaScript

I am facing an issue with transforming an array in JavaScript into a new object. Here is the initial array: data = [ { item: "Banana", path: "fruit" }, { message: "Volvo", path: &quo ...

Create an ASP button with drag and drop functionality

Is there a way to enable drag and drop functionality for an asp:Button element? Also, how can I retrieve the coordinates of the button after implementing jquery drag and drop? My goal is to store these coordinates in a database so that when I revisit the ...

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

Enhance the appearance of dynamically loaded JSON responses within prism.js using JavaScript

Is there a way to format a JSON response nicely after it has been loaded dynamically in prism ()? Currently, I am seeing the Json syntax highlighted all in one row: {"status":200,"success":true,"message":"Success! Rec ...