Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luanbitar/gatsby-plugin-dynamic-routes
Creating dynamic routes based on your environment and/or renaming existing routes
https://github.com/luanbitar/gatsby-plugin-dynamic-routes
dynamic env environment environment-variables gatsby gatsby-plugin gatsbyjs plugin plugins router routes routing
Last synced: about 1 month ago
JSON representation
Creating dynamic routes based on your environment and/or renaming existing routes
- Host: GitHub
- URL: https://github.com/luanbitar/gatsby-plugin-dynamic-routes
- Owner: luanbitar
- License: cc0-1.0
- Created: 2019-12-23T14:49:08.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T00:08:24.000Z (about 1 year ago)
- Last Synced: 2024-09-29T14:33:56.488Z (about 2 months ago)
- Topics: dynamic, env, environment, environment-variables, gatsby, gatsby-plugin, gatsbyjs, plugin, plugins, router, routes, routing
- Language: JavaScript
- Homepage: https://www.gatsbyjs.org/packages/gatsby-plugin-dynamic-routes/?=routes
- Size: 15.6 KB
- Stars: 15
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/gatsby-plugin-dynamic-routes)
[](https://www.npmjs.com/package/gatsby-plugin-dynamic-routes)
# gatsby-plugin-dynamic-routes
Use one file to declare your routes, provides to chose dynamic route paths based on your `BUILD_ENV` or `ROUTE_ENV` to your custom routing env. Also it's possible to only renaming routes on `pages/`, or use everything together.
## Install
`$ npm i gatsby-plugin-dynamic-routes`
or
`$ yarn add gatsby-plugin-dynamic-routes`
## How to use
Add the plugin to your `gatsby-config.js`.
```javascript
module.exports = {
plugins: [
`gatsby-plugin-dynamic-routes`
]
}
```
Create your's `Routes.js` inside your `src/` folder
```bash
project/
├── src/
└── Routes.js
```
`Routes.js`
```javascript
module.exports = {
home: {
path: `/casa`,
component: `src/pages/Home.js`
}
}
```
Use in client-side, include globals comment
`component/Example.js`
```javascript
import { Link } from "gatsby"
function Example() {
return
}
```
## Dynamic routes
`Routes.js`
```javascript
module.exports = {
development: {
two: {
path: `/2`,
component: `src/pages/Two.js`
}
},
staging: {
two: {
path: `/dois`,
component: `src/pages/Two.js`
}
},
home: {
path: `/casa`,
component: `src/pages/Home.js`
}
}
```
Run with your `BUILD_ENV` environment
```bash
BUILD_ENV=staging yarn start
```
If you are using the plugin [Dynamic Environment Variables][1], what will happen is that your environments inside your `.env` and `.env.staging` will be loaded, and your routes inside `staging` key will go to root of the object that is exported of `Routes` and will be available in yours global environment variables.
`component/Example.js`
```javascript
import { Link } from "gatsby"
/* globals ROUTES */
function Example() {
return
}
```
Note that you need to put `eslint globals comment` in each file that will use `ROUTES` global variable.
You need to create an empty `.eslintrc` in root of your folder to remove this comments.
If you are using eslint in your project, just update this key to your config:
```javascript
{
"rules": {
"no-undef": "off"
}
}
```
You can pass more than `path` or `component` keys, these keys will be available in your component later
## Variations
If you want to made variations of the same environment, but whit different routes, you can use `ROUTE_ENV` variable to chose your dynamic routes
`example`
```bash
ROUTE_ENV=organic BUILD_ENV=production yarn build
```
## Options
### `routeFilePath`
This options allows you to specify what's the path to your file with your Routes object
Example:
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-dynamic-routes`,
options: {
routeFilePath: `config/Routes.js`
}
}
]
}
```
```bash
project/
├── config/
└── Routes.js
```
If you want to put in root of your project, simply put the name of your file
## Ignoring gatsby default page creator
By default, gatsby generates one route to each file inside `pages/` folder, to disable this feature, put in you `gatsby-config.js`:
```js
{
resolve: `gatsby-plugin-page-creator`,
options: {
path: `${__dirname}/src/pages`,
ignore: {
patterns: [`**/*`],
},
},
},
```
## Recommended plugins
Check out the [Dynamic Environment Variables][1] plugin that provides you to load different files based on your env variables
[1]: https://github.com/luanbitar/gatsby-env-variables