I have a serverless application that is using the serverless-offline plugin and create-react-app to load a front-end client, but I'm not sure how I can configure my serverless app to load the index.html page and also the proper link format that I can use within my react app to call the serverless-offline generated routes.
I know that serverless applications typically use a static website hosted on S3 and AWS serverless endpoints within the static links to trigger the handlers, but I'm not sure how I can replicate this in the local environment. Can anyone point me in the right direction?
This is my code structure at the moment:
- frontend (create-react-app)
-- create-react-files
- backend
-- controllers
--- login.js
I then have a proxy set up in my create-react-app config file set to serverless-offline port I configured in my serverless.yml file
Related
I have a Golang/React app deployed on Kubernetes. One of the prefix paths my app uses is /staging. However, every time I try to access my app at hostname.com/staging I get an error 404 in the dev console saying it could not load bundle.js. Is there a configuration I need to take care of in React or is it something in my Golang server? Do I need to use React Router?
I have an app with django backend and react frontend. When testing and coding i run my django app on local server 127.0.0.1:8000 and connecting all my react requests to those endpoints. However in production my django app run on a different ip address and everytime i changed my code and push my reactjs app to production server i have to change all the endpoints ip's.
What is the best way to handle it? (as a source control i use git i do not know if it makes any differences)
I set the axios.defaults.baseURL depending on the window.location.origin. Here is my setting:
if (window.location.origin === "http://localhost:3000") {
axios.defaults.baseURL = "http://127.0.0.1:8000";
} else {
axios.defaults.baseURL = window.location.origin;
}
The above config is from my article Docker-Compose for Django and React with Nginx reverse-proxy and Let's Encrypt certificate. I'm serving React with nginx, and have reverse-proxy to Django (also in nginx), that's why for production setting I'm just using the same address. In the case of development, I have REST API at 127.0.0.1:8000.
I prefer this dynamic setting than settin env files because I don't need to set any environment variables.
I'm trying to figure out what are the best practices to deploy a React app that consumes an API on a different host in production.
Currently in DEV I have the following:
frontend - React app running on webpack server: http://localhost:3000/
backend - API (django-rest) running on: http://localhost:7000/
Right now I define the API url in package.json proxy attribute: "proxy": "http://localhost:7000/", and I make API calls using Axios to api/something/something/ etc.
Both apps are standalone with separate repos and I'd like to keep it that way (I don't want to merge both apps into a single codebase.)
My question:
What is the best way to configure React in production to consume the production URL?
Use process.env.NODE_ENV to find out the current environment and assign the proper url to your base url constant.
In development, you will get process.env.NODE_ENV as "development" and in production, you will get process.env.NODE_ENV as "production".
I'm building React SPA application from ground up using create-react-app and setting up uri address for API server of my SPA. According to official documentation suggested way is to create environment .env files for such kind of needs. I'm using a continuous delivery as part of development workflow. After deployment React SPA application goes in one Docker container and API goes to another. Those containers are deployed in separate servers and I do not know exactly what uri for API will be, so there is no way to create separate .env file for each deployment. Is there any "right way" to provide dynamic configuration for my SPA application so I can easily change environment parameters
API URI examples in SPA
// api.config.js
export const uriToApi1 = process.env.REACT_APP_API1_URI;
export const uriToApi2 = process.env.REACT_APP_API2_URI;
// in App.js
import { uriToApi1, uriToApi2 } from '../components/config/api.config.js';
/* More code */
<DataForm apiDataUri={`${uriToApi1}/BasicService/GetData`} />
/* More code */
<DataForm apiDataUri={`${uriToApi2}/ComplexService/UpdateData`} />
Let's imagine that you build your frontend code in some dist folder that will be packed by Docker in the image. You need to create config folder in your project that also will be added in dist folder (and obvious, will be packed in Docker image). In this folder, you will store some config files with some server-specific data. And you need to load these files when your react application starts.
The flow will be like that:
User opens your app.
Your App shows some loader and fetches config file (e.g. ./config/api-config.json)
Then your app reads this config and continues its work.
You need to setup Docker Volumes in your Docker config file and connect config folder in Docker container with some config folder on your server. Then you will be able to substitute config files in a docker container by files on your server. This will help you to override config on each server.
I have a React app deployed to production as a bundle.js and index.html pair, served up by IIS under a url like:
https://my-app.com
This talks to a .Net WebAPI backend, served up by IIS as a virtual application at
https://my-app.com/api
This allows the React app to make requests to the relative url /api/XXX and successfully hit the API.
My problem is when developing with these 2 projects running locally.
The API is run in Visual Studio 2015 in debug mode and IIS Express makes it available at http://localhost:56585/api/ (easily configurable).
While developing the React app I use JS development tools such as yarn, which provides a webserver hosting the app at http://localhost:3000.
The different webservers and different ports precludes the use of a relative url to contact the API when running locally. This means I have to hardcode the url my api hits, and change it before I build based on the target environment. Eg:
//const base_url = '/api/'; // production
const base_url = 'http://localhost:56585/api/'; // development
Is there any way to configure some kind of rewrite rule such that requests my client makes to /api/XXX get remapped to http://localhost:56585/XXX, without rewriting requests to the root url (eg http://localhost:3000/index.html)?