GoDaddy custom domain Mapped to AppEngine (Flex/Node) 404s when using www - google-app-engine

I'm trying to use "www" in the domain http://www.nickjonas.nyc and I'm just getting 404 errors from Google's end. When you go to http://nickjonas.nyc, it works just fine.
Here is what my DNS looks like on GoDaddy:
Here is what it looks like in AppEngine settings:
Here is my app.yaml:
runtime: nodejs
env: flex
And here is my app.js:
// [START gae_flex_node_static_files]
'use strict';
const express = require('express');
const app = express();
app.set('view engine', 'pug');
// Use the built-in express middleware for serving static files from './public'
app.use('/static', express.static('public'));
app.get('/', (req, res) => {
res.render('index');
});
// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}`);
console.log('Press Ctrl+C to quit.');
});
// [END gae_flex_node_static_files]
module.exports = app;

There are at least 2 possible ways to remove the 404
On Google App Engine Settings page, you will have to map both your naked and www domains to your project id i.e. repeat the steps you executed for what you currently display in your screen shot for the www subdomain. This will mean your pages will essentially be reachable via 2 urls. If you do this, you should tell Google which one to crawl by setting a canonical url. See documentation
Second option is to keep what you currently have but then add domain forwarding in GoDaddy Settings to forward http://www.nickjonas.nyc to http://nickjonas.nyc. This means that if a user enters http://www.nickjonas.nyc in the browser, it would redirect them to http://nickjonas.nyc The advantage of this method is that you don't have the duplicate url issues associated with method 1.

I see that in your GoDaddy domain configuration, you are setting the CNAME alias for www of your domain. Something I could not see is if you also configured the www subdomain inside the App Engine custom domain mappings. The App Engine documentation points out that you must add the subdomains you would like to map during configuration, recommending to map the www subdomain:
In the Point your domain to [project-ID] section, specify the domain and subdomains that you want to map.
We recommend mapping the naked domain and the www subdomain. You can add more subdomains if you need them. When you've added all the mappings you want, click Save mappings.
Your App Engine config screenshot does not show it, but it should appear as shown here with both the www subdomain and the actual domain in the list.

Related

Mapping Google App Engine service to Cloudflare

I'm having an Google App Engine service residing at https://service-dot-myproject.uc.r.appspot.com/
However I want it to be reachable via https://app.mydomain.com
I have set up the DNS for mydomain.com on Cloudflare and added the custom domain mapping in app engine and set up a dispatch.yaml file
- url: "app.mydomain.com/*"
service: service
Is there a way to somehow map
https://service-dot-myproject.uc.r.appspot.com -> https://app.mydomain.com ?
currently https://app.mydomain.com only resolves to defaultservice
The following dispatch.yaml file resolved the issue
dispatch:
- url: "app.mydomain.com/*"
service: service
Also the file must be separatly deployed via:
gcloud app deploy dispatch.yaml

React CRA: When adding subdomain on localhost it says: The development server has disconnected

I am on a project with create-react-app without ejecting.
I wanted to have subdomains on localhost or a fake host for development.
When I added my host in windows hosts file it said invalid host header even if I add HOST=mydevhost.com DANGEROUSLY_DISABLE_HOST_CHECK=true in .env file.
I couldn't make it work without using third party apps so I used Fiddler and it worked as expected now the sites comes up but instantly says:
The development server has disconnected.
Refresh the page if necessary.
The problem is that the fast refresh doesn't work now and I have to refresh the site every time I make a change. Is there anything that I'm doing wrong here? Should I even use something like Fiddler here?
I ended up using react-app-rewired and in config-overrides.js I added the subdomain to allowed host. The final config looks like this:
module.exports = {
webpack: (config, env) => {
return config;
},
devServer: (configFunction) => (proxy, allowedHost) => {
const devServerConfig = configFunction(proxy, allowedHost);
devServerConfig.allowedHosts = ["subdomain.localhost"];
return devServerConfig;
},
};
I thing you can do that from your operating system to point your local domain to your react server, meaning that can create a local domain that points to the app server (host:port).
here's a guideline that may help:
https://www.interserver.net/tips/kb/local-domain-names-ubuntu/
Relevant answers:
How can I develop locally using a domain name instead of 'localhost:3000' in the url with create-react-app?

How can I serve a domain specific manifest.json for a heroku app with mirrored domains?

I have a create-react-app application I am working on that is mirrored on multiple domains. Each domain has its own branding and now that we are supporting PWA app installs, we would like to serve different icons & application names based on which domain the user visits. Unfortunately since the domains all point to the same Heroku instance, I have been unable to come up with a way to set up the manifest file to do this. Is there some heroku settings where I can serve manifest-A to visitors from domain-A and manifest-B for visitors from domain-B? Should we be hosting two applications?
This may not be the best solution but I ended up switching build packs and writing our own express server to serve our application. I set up the route for /index to string replace a specific dom element with the correct manifest & meta tags needed for pwa compatibility. Here is the route in question:
app.get('/index.html', async (req, res) => {
const indexBuffer = await readFileAsync(path.join(__dirname, 'build', 'index.html'));
let index = indexBuffer.toString('utf8');
let manifestConfig = defaultConfig;
if (req.hostname === 'app.otherHostName.com') {
manifestConfig = otherHostNameConfig;
}
index = index.replace('<link rel="manifest">', manifestConfig);
return res.send(index);
});

After deploying React/Express app to Heroku unable to start passport.js flow (page reloads instead) [duplicate]

I'm building a node + express server, with create-react-app to the frontend.
I used passportjs for auth routes handling, and all the stuff totally working on localhost ( backend on port 5000 and frontend on port 3000, with a proxy ).
When I deploy to Heroku, seems like the server can't recognize my auth routes and so heroku serve up static index.html.
If I test my APIs with Postman all seems to work ( I can see the html page for google oauth ), but with an anchor tag in my react app or manually writing the endpoint in the url, I can see only the same page reloading.
My server index.js:
const express = require('express')
const passport = require('passport')
const mongoose = require('mongoose')
const path = require('path')
// KEYS
const keys = require('./config/keys')
// MONGOOSE MODELS
require('./models/User')
mongoose.connect(keys.mongoURI)
// PASSPORT SETUP
require('./config/passport')
// CREATE THE SERVER
const app = express()
// EXTERNAL MIDDLEWARES
require('./middlewares/external')(app)
// ROUTE HANDLERS
require('./routes/authRoutes')(app)
// PRODUCTION SETUP
if (process.env.NODE_ENV === 'production') {
// express serve up production assets ( main.js, main.css )
app.use(express.static('client/build'))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
})
}
// START THE SERVER
const PORT = process.env.PORT || 5000
app.listen(PORT)
Flow:
LOCALHOST:
react app starts -> I click 'Google Login' -> GET request to "/auth/google" -> google oauth flow -> redirect to "/" and my react app reappears, the user is logged in.
HEROKU:
react app on my-app.herokuapp.com/ -> click on "Google Login" -> the page reloads, nothing happens. the user is not logged in.
Please guys, help me.
Thanks
This is a result of the service worker being installed by default to make your app a Progressive Web App
To determine if this is an issue for you, test your heroku production mode app in incognito mode. The request for /auth/google should now reach the server and behave as it does in development.
Once you determine it is an issue, you can remove the
import registerServiceWorker from "./registerServiceWorker";
from your /client/src/index.js file.
You browser cache may already contain an installed service worker so you may have to
clear browser cache on a user browsers
uninstall the server worker programmatically
import { unregister } from './registerServiceWorker';
....
unregister();
I had the same issues with same symptoms exactly.
For me the cause was a typo in the keys: in server/config/prod.js I had a line reading cookieKey: process.env.COOKIE_KEY but in Heroku Config Variables that variable was named cookieKey. Renaming it to COOKIE_KEY inside Heroku solved the issue.
If you've followed the Stephen Grider tutorial one thing I'm wondering: Is your passport.js file in config or services? I see you've written in index.js: require('./config/passport')
whereas mine in index.js is require('./services/passport')
may not be your solution to the google oauth flow hanging in production but may help.

Configuring a React-Express App on Heroku to Pull Data in an Ajax Request

I have a React-Express app that pulls data from a MongoDB database on mLab.
On my server.js file, I have the api port set as such:
var port = process.env.PORT || 3001;
And it listens as such:
app.listen(port, function() {
console.log(`api running on port ${port}`);
});
Currently, in my React app, one of the components makes an AJAX call to the database on mLab using the url of "http://localhost:3001/api/data", which works fine and pulls the data I requested.
However, when I deploy the app to Heroku, I'm not sure how to configure the server.js and the url in the React app, so the React app is able to pull the data from the database.
I've conferred with mLab, and there are no issues, and I've conferred with Heroku, and this is beyond the scope of their support.
UPDATE: Is it that the process.env.PORT variable needs to be set or redirected?
Any ideas what I need to do?
Thanks!
If your express app is serving both your bundled react app and your api, you need to make sure that express knows that the /api endpoint needs to be NOT served to the react app.
Not sure what your server code looks like, but this has worked for me:
if (process.env.NODE_ENV === 'production') {
app.get(/^\/(?!api).*/, (req, res) => { // don't serve react app to api routes
res.sendFile(PATHTOREACTBUNDLE));
});
};
Basically, you want to tell express that, if in production mode (deploy on heroku), serve all endpoints, except the api endpoint (/^/(?!api) to your react bundle.

Resources