I'm trying to deploy my Gatsby app with auth0 to Heroku, but it doesn't work like on localhost.
I have the auth0 config in my .env file and all required URLs added to the auth0 dashboard.
To deploy it I added the regarding production URLs in the auth0 dashboard and set the environment variables in Heroku. I tried both AUTH0_CALLBACK and GATSBY_AUTH0_CALLBACK (for client-side availability), but both didn't work.
To see whether the environment variables are available I added this process.env... and on localhost, I can see the variable content here, on the Heroku version there is nothing.
const Account = () => {
if (!isAuthenticated()) {
login()
return <p>Redirecting to login... {process.env.AUTH0_DOMAIN}</p>
}
Does anybody have an idea how to make the environment variables accessible?
see Heroku config vars - https://devcenter.heroku.com/articles/config-vars - you can set these using either the Heroku CLI or Dashboard.
Config vars are exposed to your app’s code as environment variables. For example, in Node.js you can access your app’s DATABASE_URL config var with process.env.DATABASE_URL.
Related
In my Vercel's app dashboard I set environment variable BACKEND_URL for Preview environment and dev branch:
However after deploying it, the variable doesn't seem to work. My site can't access the api.
I added this quick way of checking what is inside process.env.BACKEND_URL and as expected - it is empty.
<Text>Backend URL: {process.env.BACKEND_URL}</Text>
Here is the screenshot of Vercel build which shows that the newest deploy is in fact Preview and from dev branch:
What am I doing wrong?
I have the same problem in my deployed react app. When I try to call my backend using a vercel env, instead of just calling the url it appends the vercel app url to the env for no reason causing it to fail.
For example:
REACT_APP_API_UR = "https://www.example.com"
and I create a post request to my api the url it post to is:
https://yourapp.vercel.app/%22https:/www.example.com%22
I'm using heroku to deploy a nodejs backend, and amazon s3 to deploy the static files of a react app, so the frontend stored on an s3 bucket makes requests to the heroku backend.
Once I finished creating my staging environment for heroku, I just needed to create a new bucket and hook up the new url so the staging frontend can correctly make requests to the staging backend, I ended up with something like this on my react app:
// index.js
let BASE_API_URL;
if (process.env.NODE_ENV === "production") {
BASE_API_URL = "https://myproductionapiurl.com";
else if (process.env.NODE_ENV === "staging") {
BASE_API_URL = "https://mystagingapiurl.s3-website.us-east-2.amazonaws.com";
} else {
BASE_API_URL = "https://someotherurl.com";
}
axios.defaults.baseURL = BASE_API_URL;
But then I noticed that s3, being a service to save your static files, doesn't have a way to set environment variables, so I can't specify based on process.env.NODE_ENV to what url to make the requests, and I got stuck.
Right now I'm just hard coding the url so it works, but once I try to merge the staging and production environments a git conflict will always appear, is there any way I can do this using amazon s3 buckets and react?
Thanks to #jonrsharpe I was able to get it working, since I'm using react, instead of using NODE_ENV (which cannot be overwritten) I used REACT_APP_ENV, and I set it as an environment variable before running the build:
REACT_APP_ENV=staging npm run build
I was hoping to deploy a Next.js app with Laravel API. I had developed React apps with CRA and in those I used the API server to serve the index.html of the CRA as the entry point of the app.
But in Next.js, after development I get to know that it needs a Node.js server to serve (which is my bad, didn't notice that). There is an option next export that builds a static representation of the Next.js app and it has an index.html. I am serving the index.html as the entry of the app by my Laravel API. It is serving the page, but just some of the static contents.
What I was hoping to know is it possible to host the aPI and the Next app from a single PHP shared hosting without any node server? If so, how? If not so, what could be the alternatives?
Actually the acepted answer is completly wrong, when you do yarn build and in your package.json is set like "build": "next build && next export", you will get an out folder which all the items in there are used to build without node.js server
Now since you are using laravel, and you use the out folder you will only load half of the page because the routes are not set properly. for that to work you need to edit your next.config.js edit it to
module.exports = {
distDir: '/resources/views',
assetPrefix: '/resources/views',
}
These will set the root directory to the root one in Laravel. now this will work for SPA (single page application) only for the dynamic routes you need to match with a view file for each one that you have in your out folder
For each route that you have you need to create a new "get" route in laravel
Route::get('/', function () {
return require resource_path('views/index.html');
});
Route::get('/contacts', function () {
return require resource_path('views/contacts.html');
});
Route::get('/post/{slug}', function () {
return require resource_path('views/post/[slug].html');
});
Notice that you can pass a wildcard for dynamic routes and they are all gonna work. once you do that and you deploy route out folder inside /resources/views in Laravel it's going to work
Apparently there is no alternative to nodejs server, which is not an option for me currently, so I unfortunately had to abandon next.js and create a CRA app and used as much from the next.js as I could.
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 am building a web application from the ASP.Net Core React template, whose "ClientApp" React portion appears to be a 'create-react-app' project. When I deploy the app to IIS, it gets hosted in a subfolder from the root, i.e. http://myserver.com/SubApp. Because of this, I have changed the "homepage" value in package.json to http://myserver.com/SubApp.
What I am now experiencing is that when I am making fetch calls in my javascript code locally, if I use fetch('/myendpoint'), the the url requested locally is https://localhost:44315/myendpoint (which works), but when deployed, this url becomes http://myserver.com/myendpoint, which does not work.
Conversely, when I make the endpont fetch('myendpoint') (no leading slash), the server requests the correct URL http://myserver.com/SubApp/myendpoint but localhost fetches the incorrect URL, https://localhost:44315/SubApp/myendpoint.
I understand that the leading slash makes the request from the root, but the root appears to be different in localhost vs. on the server.
For local debugging purposes, I tried setting a proxy in package.json to https://localhost:44315 so that hopefully fetch('myendpoint') (no leading slash) would work in my local environment, but when I try this, chrome prompts me to sign in repeatedly without ever successfully making the request.
I feel like I am almost there, but I must be missing something. How can I configure my package.json (or other project configuration) to make the fetch commands succeed on both localhost and my server, without doing something hacky like checking the URL in the javascript code before every fetch?
What you need is Proxying API Requests in Development.
It easily allows you to call any endpoint in development and forward it to your backend or other location without CORS issues or your problem of mismatched endpoints.
You will have to use the manual configuration option, since the default proxy setup only helps with host/port forwarding.
Install http-proxy-middleware as a dev dependency:
$ npm -i http-proxy-middleware --save-dev
Following the guide linked above, you can use this configuration:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/SubApp/*',
createProxyMiddleware({
target: 'localhost://44315', // or anything else, point to your dev backend
pathRewrite: {
'^/SubApp': '/', // remove base path
},
})
);
};
You can then fetch with the /SubApp part in the request which will be removed in developement. You can use other configurations to achieve this, this is one example.
I had this same experience as well and found that setting the homepage value in the package.json is a dead end. What you want to do is make use of the PUBLIC_URL environment variable to set a full absolute url in your .env . There may be a way to use relative urls, but there were some edge cases that just made it cleaner to use an absolute URL.
When you set this environment variable you want to make use of it in the following places:
Your Routes (if you use react router)
The path should be prefixed by process.env.PUBLIC_URL
Your internal links should also be prefixed by the env var.