I'm trying to build a new frontend on top of an existing GAE application using React, Redux and Redux-Router. My problem is figuring out how to make GAE always fallback to the html page where Redux-Router will take care of the routing.
Right now, if I go to '/' the app works fine and the navigation is perfect. When I refresh the page GAE kicks in and tries to find the route.
How do I configure GAE to always go the same html? oh, only if the url doesn't start with api/ to serve my data?
Thanks for the help
web.xml (under 2.5) allows you to wildcard the start or the end of the path (but not anywhere in the middle)
You should achieve what you're after by using /* - which is basically any path not mapped by another rule. Your /api/*rule should continue to work.
Assuming you're using Python in the backend the following would do the trick in your main.py - where IndexHandler is the handler you use to render the "html page where Redux-Router will take care of the routing".
app = webapp2.WSGIApplication([
('/.*', IndexHandler)],
config=config,
debug=DEBUG)
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
I use digital ocean space and CDN to host a React SPA. When hitting with a browser the url [host]/index.html it works fine. However hitting [host]/index.html/customers/one or any other subpaths, returns a 404. Currently, any reload on any subpath returns that 404. Last, I use terraform to update the SPA artifacts on DO spaces and I have tried to add a website_redirect="/index.html" to all the bucket objects (js, html and css) but with no success (more info if necessary here). And to be completely honest I am not sure I understand that option in the terraform digitalocean provider. I might be using it completely wrong.
Now, I have seen that question in multiple places but never with a clear answer.
Here is one on digitalocean community (https://www.digitalocean.com/community/questions/is-it-possible-to-send-a-301-redirect-for-bucket-objects) where no answer is provided but the issue seems to be similar.
There is a similar question on SO without an approved answer Redirect wrong URL/path DigitalOcean Spaces
This is a DO idea that is somewhat related https://ideas.digitalocean.com/ideas/DO-I-318
Is there a way to achieve the mentioned goal of loading index.html for every route with DO space + CDN and let the app parse the rest of the path to display the right component subtree of the react app?
I tried using OWASP in my angularjs web app, however.. none of my routing pages ever get lists in the spider.. can someone give me a detailed explanation on how to do this? I just want to see the vulnerabilites of all routing URLS in my angularjs app
ZAP will spider from the base URL you give it. Make sure that it can get to your routing pages by traversing the paths of available links that start on your base URL. If ZAP can't get to them by traversing your site from the base URL, create a simple sitemap or listing of all of your URLs and link/insert that on your home page.
Also, this is a handy way to get ZAP up and running via Docker.
https://github.com/zaproxy/zaproxy/wiki/Docker
HTH
AngularJS makes heavy use of JavaScript, which the 'traditional' spider doesnt handle very well.
Instead use the ajax spider: https://github.com/zaproxy/zap-core-help/wiki/HelpAddonsSpiderAjaxConcepts this is slower but will handle any JS as it launches browsers to crawl the site.
I want to serve same index.html page for all (sub)urls in my app on gh-pages
is that possible?
right now when I go to repo/inner/path I get a 404
so I want to "force" github pages serve the same root index.html on all routes
This may or may not be in the cards for you, but it seems you're setting up routing for a SPA. Many client based routers offer hash-based routing precisely for this reason so that you don't have to configure your hosting provider to redirect urls to return index.
The landscape of solutions seems to be:
Use Hash-Based Routing
USE: https://example.com/index.html#inner/path
NOT: https://example.com/inner/path
React Router - <HashRouter>
Angular - HashLocationStrategy
Vue Router - {mode: 'hash'}
Use the custom 404 page for gh-pages to redirect all missed traffic back to index.html
Choose a different free static hosting provider that allows basic url rewrites or redirects like:
netlify
surge.sh
It doesn't look like github supports this feature right now, so you'll either need to avoid deep link requests to the server or change to a hosting provider that allows you to do so.
Further Reading:
Can I create routes with react-router for a github-pages site?
Add single page application support for Github pages
S(GH)PA: The Single-Page App Hack For GitHub Pages
Check out Single Page Apps for GitHub Pages. It uses a custom 404.html file with a redirect script to always serve index.html, while preserving the path that was originally requested.
If you can list all possible urls for your application, you can use jekyll redirect from on github-pages.
Sadly, it will be difficult to list all urls that contain a specific id or name like /path/customer/id where id can be any integer.
You will have to find another hosting like netlify or cloudcanon which allows you to configure real redirections.
I have an Angularjs app running on Sinatra.
My Angular routes are working if I click on a link within the app, however if I visit the url directly I get a 404 from Sinatra.
Is there a way to pass the routing from Sinatra to Angular?
Currently all Sinatra is doing is loading the index.html
get '/' do
File.read "#{Dir.pwd}/app/index.html"
end
Thanks to #Ryan I ended up implementing a working solution.
get '/*' do
File.read "#{Dir.pwd}/app/index.html"
end
One way you could do this would be to set up a catch-all route with Sinatra to pass requests on to your angular app. I'm not very familiar with the sinatra framework, but for flask this is how you do it:
#app.route('/', defaults={'path': ''})
#app.route('/<path:path>')
def index(path):
return make_response(open('templates/index.html').read())
Just find the equivalent for Sinatra and you'll be good to go.
EDIT: I realized it is probably not the best idea to set up a catch-all route, especially if you are building a website (and using "$locationProvider.html5Mode(true)" vs. building a single-page webapp), for which returning proper 404's is important for search engine indexing, etc.
I would instead register a flask route for every route in your Angular app. In flask, this is how you do it.
#app.route('/')
#app.route('/about')
def index(path):
return make_response(open('templates/index.html').read())
In sinatra, I'd suppose it would be something like this:
get '/' do
get '/about' do
File.read "#{Dir.pwd}/app/index.html"
end
EDIT: It really depends what you're going for. Some sites want their entire site to be an angular app (and don't prioritize SEO, proper 404's, etc.) and others want a particular section to be reserved for their angular app. You might see "/app/OTHER_STUFF", for example. In that case, a catch all would work well.