Comments (13)
The SPA server is a common pattern for tidy URLs. Angular, React, Aurelia, these all can use #
or they can use "pretty" urls without the #
, it's up to the server to return the index.html
no matter what url is requested.
In node.js I have handled this by catching a 404 and returning the index.html
I'm using a similar strategy using gin:
router.NoRoute(func(c *gin.Context) {
c.File("./public/index.html")
})
The actual implementation will run a regex on the Request.URL.Path and only return index.html when the regex is true. So if you ask for /unknown-image.png
you'll still get a 404.
from contrib.
so what is the final solution?
@amboowang a simple solution is
//configuration to SAP applications
router.Use(static.Serve("/", static.LocalFile("./assets/build", true)))
router.NoRoute(func(c *gin.Context) {
if !strings.HasPrefix(c.Request.RequestURI, "/api") {
c.File("./assets/build/index.html")
}
//default 404 page not found
})
from contrib.
I also plan to server SPA with gin,
@djensen47 ,base on your comments, I have the code
router.NoRoute(func(c *gin.Context) {
dir, file := path.Split(c.Request.RequestURI)
ext := filepath.Ext(file)
if file == "" || ext == "" {
c.File("./public/index.html")
} else {
// strings.Split(file, "?")
c.File("./public" + path.Join(dir, file))
}
})
but when after adding service workers... I will get lot of error here.
I thought a better SPA support for gin depends on the issue of httprouter.
and there will be lots of scenario to handle
like: https://www.dreambo8563.tech/manifest.28f941dd3f089e9cfec1.js?aa (path with query)
julienschmidt/httprouter#73
from contrib.
What is the difference between using the contrib static module and the built in router.Static? Is the contrib module required to do a root "/" static route? I get an error when trying to do so with r.Static if I have any other routes.
from contrib.
You can handle all the routes by including a separate line for each one of them.
The below example handles 3 routes, that are, '/' '/login' and '/signup'.
I am using reactjs, but i think (not sure!) this will work for other libraries/frameworks (like angular) as well.
(The 'build' folder is obtained by the command 'npm run build' in react.)
router := gin.Default()
router.Use(static.Serve("/", static.LocalFile("./build", true)))
router.Use(static.Serve("/login", static.LocalFile("./build", true)))
router.Use(static.Serve("/signup", static.LocalFile("./build", true)))
router.NoRoute(func(c *gin.Context) {
c.JSON(404, gin.H{
"code": "PAGE_NOT_FOUND", "message": "Page not found", // or use c.File("./public/index.html")
})
})
from contrib.
@eduardonunesp I don't get what you are trying to ask. Angular uses #/path1/path2
as routing. That is not specified by the server or in this case, gin. You just need to serve a folder (or root path) as static, and let the angular magic do the rest.
from contrib.
@javierprovecho the idea is when you use Angular in HTML5 mode, the app don't use the #
just act like non-SPA. For instance when I was using NGINX it needed to config a sort of catch all URL.
To help clarify the idea, please take a look in this article http://www.codelord.net/2015/05/12/angularjs-how-to-setup-pushstate-with-html5mode/
from contrib.
I ended up doing this in labstack/echo instead. Echo actually has the plugins required to make this work seemlessly. We also open sourced the project and call it SPArge: https://github.com/BrewdHQ/sparge
from contrib.
@djensen47 yes, echo can support scenario well
from contrib.
See the source code from go-ggz/ggz
https://github.com/go-ggz/ggz/blob/8e98db8d743a66bf2f3ea8dbb8c48686abc150a5/router/router.go#L79-L80
from contrib.
Any solution for this to serve spa with frontend routing?
from contrib.
so what is the final solution?
from contrib.
Just to add to that solution which worked for me as well, in the served html file I had a reference to a js file of type
<script src="./myfile.js"></script>
that was causing me trouble while resolved with a path like /path/secondpath
and looking ok with just /path
and I had completely forgotten about this head option
<base href="/">
https://stackoverflow.com/a/46273294/2205050
from contrib.
Related Issues (20)
- [WIP] Move all middleware into separate repos on gin-contrib org HOT 8
- Package dependencies HOT 1
- Add the authorization middleware HOT 4
- Fix logrus import in ginrus (due to rename) HOT 3
- session Options is not working HOT 10
- Add the rollbar middleware HOT 2
- Duration for a valid JWT token
- JWT force token expiration HOT 1
- commonlog
- [SOLVED] gin-contrib has gone? HOT 6
- `time` attribute duplicated in logrus/ginrus entry HOT 3
- auto update
- expir
- What is the license? HOT 1
- how to get x-response-time and write it in the http header with gin? HOT 2
- [QUESTION] sessions: Session `Get` method HOT 2
- Broken link in the "About" section HOT 1
- add support for samesite options HOT 1
- Remove repository with stolen source code
- the github page were 404 not found
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from contrib.