score:1
you could write an express server to make the api calls with the key and serve the same response. using the express server as an intermediary this way, you will never have to expose the api key on the client side.
edit: didn't read that you already thought about it
in that case, you can use webpack-dev-middleware (https://github.com/webpack/webpack-dev-middleware) and use just one express server to serve the api and static files.
your code might look like this:
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
// require keys
var app = express();
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noinfo: true,
publicpath: config.output.publicpath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('/api', function(req, res) {
// api logic
)}
app.get(/^(?!\/api).*$/, function(req, res) {
res.sendfile(path.join(__dirname, 'index.html'));
});
app.listen(3000, function(err) {
if (err) {
console.log(err);
return;
}
console.log('listening at http://localhost:3000');
});
Source: stackoverflow.com
Related Query
- How do I store and access my API keys with a React + Webpack app?
- How can I build a React app with Webpack and import an assets folder?
- How to determine the order of css in my create react app build with webpack and customize-cra?
- How to fix "Response to preflight request doesn't pass access control check: It does not have HTTP ok status" error in react app with nodejs api
- How to access search params with node.js(express) API call and served on react front-end
- How to hide API keys and secrets in React JS app deployed on Docker
- How to fetch API and store some value and then fetch again with that stored value in React
- How can I locally access my react js app with wamp and allow access to other computers?
- How to import CSS modules with Typescript, React and Webpack
- How to set up Babel 6 stage 0 with React and Webpack
- How do I store JWT and send them with every request using react
- How to make react router work with static assets, html5 mode, history API and nested routes?
- Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?
- CORS Issue with React app and Laravel API
- React Native: HeadslessJS and Redux - How to access store from task
- How to test snapshots with Jest and new React lazy 16.6 API
- How to secure my react app api with csurf?
- How to implement Google API with React, Redux and Webpack
- How to access environment variables in react from docker and webpack
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to set React app and API on same port?
- How to reduce react app build time and understanding behaviour of webpack when bundling
- How to use Jest with React and Webpack
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How to split app and vendor code with Webpack
- How to serve React app with Material-UI and react-router
- How do I integrate React with a non-trivial AngularJS app and existing grunt configurations?
- how to run my node application and react app in the same time with one command?
- Unicode characters not showed when bundling and deploying React app with webpack and babel
- How to pause and restart API calls in react-redux app while access token is being refreshed?
More Query from same tag
- Auto-Scrolling A Flexbox Column With A Sticky NavBar
- Creating a new item or editing existing one makes column jump
- React Apollo: How to access element Trix-Editor within a Mutation component?
- Getting div's attribute value in the different function (REACT)
- Material UI change Input's active color
- How can I hide element within loop with react?
- How to transform an array with some deep nesting into another object in order to manipulate expanding initialState in React-table
- How to call a method from click event within render?
- How to resolve "Invariant Violation" error, related to redux store?
- Adding values of redux-form field array
- What is the difference between import * as react from 'react' vs import react from 'react'
- React ignores value attribute of input field
- Why do I have to specify a default export twice in React?
- Why are component `refs` `undefined` when I try to access them?
- How to show custom text (placeholder) in KeyboardDatePicker
- firebase deployment issue with a react app
- NextJS + Apollo: How to get multiple queries on apolloClient.query inside getServerSideProps?
- Where to place 'this.setState in this case?
- Markdown method in React. Not getting a return value that is in html
- How do I change the default background color of notistack in MUI v5?
- React DnD showing entire list when dragging
- Why is the 'www-authenticate' header missing from when I call api from React application?
- How can I change form fields based on dropdown selection with reactJS
- How to set textarea value with line break in ReactJS
- Mounting React Components to The Client
- POST request responds with 404 while GET request works fine .NET Core, React
- How to setState to update an array in React?
- How to put a loader in a nested table in antd?
- Is useRef Hook a must to set and clear intervals in React?
- How can I rotate and zoom in on a Three.js object and share in real time between canvases?