Hi everyone I moved my gatsby site to netlify, I installed google-map-react on localhost: 8000 everything works fine my key is in a .env.development file and in a .env.production i saw i must call my var with GATSBY_***** so i made this
GATSBY_GOOGLE_API_KEY = "**********************"
And i call it in my component Map :
const key = process.env.GATSBY_GOOGLE_API_KEY
It works well in local but in netlify i go in my settings of my site and Environment variables
I make GATSBY_GOOGLE_API_KEY Variable and his value but i've got an error message :
backend.js:6 Google Maps JavaScript API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
I must have missed something but I don't know what thank you very much if you have any leads
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 have created a web application and now I am trying to deploy it with Nginx.
After developing the application I have created a production version with the command "npm run build".
Since NGINX I serve these files, the corresponding block is:
location / {
root /var/www/build
}
With this, my app works perfectly and I can access it through mydomain.com
The problem is that I want my application to be accessible via
mydomain.com/app
Since the address mydomain.com I want to reserve it to use it with wordpress and give SEO.
The thing is that when I change the NGINX configuration to
location / app {
root /var/www/build
}
gives 404 error.
Looking for the problem I found that the solution is
occasion /app {
aliases /var/www/build
try_files $uri $uri/ /index.html?$args;
}
but with this change I get a blank page instead of my app. And if I inspect the page, the response is as follows:
enter image description here
I have verified that in my browser I already have JavaScript enabled, so I don't understand what is going on.
I have a strong feeling your JavaScript files you have in your builds html file will result in a 404. Please check the Network Tab of your Browsers Developer Console. Entering this by pressing F12.
As your app is deployed under the app location but your JavaScript files are pointing to / they will never be found.
There are a million and one solution to solve this issue. Given you are using something like React.JS, Angular, Vue (Please make clear what kind of framework you are using) you should set /app/ as your new base.
Check this https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/. Great tutorial.
If you are using something not related to any framework you can use <base>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
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.
I am trying to deploy my SSR app in Firebase originally forked from, after doing some modification in the app.
Which works fine when I do sudo firebase serve --only functions,hosting but throwing error when I do firebase deploy.
The reproducible repo has a package.json.
I am using the public directory as my function directory as well.
However, even if I am using a different function directory for my cloud functions, I see the same errors.
Function failed on loading user code. Error message:
Code in file index.js can't be loaded. Is there a syntax error in your code?
Detailed stack trace: TypeError: c(...) is not a function
at Object.<anonymous> (/user_code/assets/app.server.js:1:28950)
at Object.module.exports.n (/user_code/assets/app.server.js:1:29283)
...
Functions deploy had errors.
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
It is possible, but you cannot serve static assets with cloud functions. You need a mix of firebase functions and firebase hosting.
The guys at Firebase already thought on this and you also have an implementation available.
Check the following documentation:
Overview
Dynamic Content
Code Example
Youtube Video
Note: There is a delay that you need to take into consideration when using cloud functions.
When a new instance handles its first request, the response time suffers, which is called a cold start
More info
The problem is that firebase hosting only supports SPAs, which means that SSR is out of the picture, you need to run your SSR server in a different env where you can run nextJS, or if you're using a static page generator you could upload the files directly compromising on the ability to refresh the content, although, I'm sure a solution with cloud functions and gatsby is feasable.
Tl;DR: You won't get SSR out of Firebase Hosting
We created a Linux Web App in Microsoft Azure. The application is static written with React (html and Javascript).
We copied the code into the wwwroot folder, but the application only showing only hostingstart.html and when we try to get page index.html we have this error:
Cannot GET /index.html
We tried with a sample of Azure in GitHub (https://github.com/Azure-Samples/html-docs-hello-world) but the error is the same.
The url is this: https://consoleadmin.azurewebsites.net/index.html
Last week the application was running correctly.
We forget to do something?
MAY 2020 - You don't have to add any javascript files or config files anywhere. Let me explain.
I was facing this exact same issue and wasted 6 hours trying everything including the most popular answer to this question. While the accepted answer is a nice workaround (but requires more work than just adding the index.js file), there's something a simpler than that.
You see, when you just deploy an Azure Web App (or App Service as it is also called), two things happen:
The web app by default points to opt/startup/hostingstart.html
It also puts a hostingstart.html in home/site/wwwroot
When you deploy your code, it replaces hostingstart.html in home/site/wwwroot but the app is still pointing to opt/startup/hostingstart.html. If you want to verify this, try deleting opt/startup/hostingstart.html file and your web app will throw a "CANNOT GET/" error.
So how to change the default pointer? It's simpler than it looks:
Go to Configuration tab on your web app and add the following code to startup script:
pm2 serve /home/site/wwwroot --no-daemon
If this web app is a client-side single-page-app and you're having issues with routing, then add --spa to the above command as follows:
pm2 serve /home/site/wwwroot --no-daemon --spa
This will tell the web app to serve wwwroot folder. And that's it.
Image for reference:
Screenshot explaination
PS: If you only set the startup script without deploying your code, it will still show the hostingstart.html because by default that file lies in the wwwroot folder.
Ok you are gonna love this. This happened to me today also. Same exact thing.
I am pretty sure the azure team flipped a switch somewhere and we fell through a crack.
I found this obscure answer with no votes and it did the trick (with a little extra finagling)
BONUS! this also fixed my router issues I was having only on the deployed site (not local):
Credit: #stormwild: Default documents not serving on node web app hosted on Azure
From #stormwild's post see here:
https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
Steps:
Go to your azure portal, select your app service and launch ssh
In ssh terminal, navigate via command line to /home/site/wwwroot
create index.js there with the following code:
var express = require('express');
var server = express();
var options = {
index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);
NOTE: Be sure to run npm install --save express also in this folder else your app service will crash on startup
Be sure to restart your app service if it doesn't do so automagically
A workaround, I changed the webapp stack to PHP 7
Another solution would be to add a file called ecoysystem.config.js right next to your index.html file.
module.exports = {
apps: [
{
script: "npx serve -s"
}
]
};
This will tell pm2 to associate all requests to index.html as your app service starts up.
Very helpful information here: https://burkeholland.github.io/posts/static-site-azure/