https://github.com/garronej/github-pages-plugin-for-type-route

Feature create-react-app/type-route/gh-pages compatibility
https://github.com/garronej/github-pages-plugin-for-type-route

Last synced: about 1 month ago
JSON representation

Feature create-react-app/type-route/gh-pages compatibility

• Host: GitHub
• URL: https://github.com/garronej/github-pages-plugin-for-type-route
• Owner: garronej
• License: mit
• Created: 2020-11-27T20:16:25.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2024-09-18T00:51:54.000Z (9 months ago)
• Last Synced: 2025-05-07T13:04:27.442Z (about 1 month ago)
• Language: JavaScript
• Size: 248 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



# What?

This is a build tool to enable [Vite](https://vitejs.dev/) and [`create-react-app`](https://create-react-app.dev)'s sites that uses [`type-route`](https://typehero.org/type-route) to be deployed on [`gh-pages`](https://pages.github.com).

# The Problem it solves

Github pages has no configuration to enable single pages application.

If you GET `https://my-domain.com/a/b/foo` github page will serve `a/b/foo.html` when in reality we would like that, regardless of the url path, it's always the `index.html` that is served.  

The workaround is to copy the content of `index.html` into a `404.html` file, it works but it's very bad for SEO.

# The solution

Copying the index.html everywhere there is a path before deploying.

# How to set it up

![image](https://user-images.githubusercontent.com/6702424/100515459-b65a2980-317c-11eb-9884-a53a0fe3fdbf.png)

![image](https://user-images.githubusercontent.com/6702424/100515424-7004ca80-317c-11eb-9d7d-c371de576c11.png)

![image](https://user-images.githubusercontent.com/39378411/150363865-061c42d0-4093-4518-a5dc-a320ed0a55d1.png)

> WARNING: In the `router.ts` file you can only perform

> relative import, import using based on the `baseUrl` option

> of the `tsconfig.json` file are not supported.

Then when we run `yarn build` and this will get generated for us:

![image](https://user-images.githubusercontent.com/6702424/100515450-a04c6900-317c-11eb-8153-a5a278ae58cd.png)

All this files are copies of `index.html` generated by the tool:

```json

[

    "auteur.html",

    "evenements.html",

    "naturalisme.html",

    "naturalisme/antilles.html",

    "naturalisme/france.html",

    "naturalisme/ouset-canadiens.html",

    "naturalisme/reunion.html",

    "portrait.html",

    "404.html"

]

```

result: No more 404 🥳

![image](https://user-images.githubusercontent.com/6702424/100515655-fcfc5380-317d-11eb-8f52-7f207e1a24ce.png)

This is a project that uses this module: https://github.com/thieryw/theo-tz  

It's online here: http://thieryw.github.io/theo-tz