Gridsome Rewrite Rules for Dynamic Routes After Build
In this article, I’m going to share how to rewrite rules for the dynamic routes after publishing Gridsome application on live server.
Table of Contents
Step 1 : Create Dynamic Pages
Let’s create three dynamic pages using the Pages API. Here’s an example:
module.exports = function (api) {
api.createPages(({createPage}) => {
createPage({
path: '/products/:slug',
component: './src/templates/Product.vue'
})
createPage({
path: '/categories/:slug',
component: './src/templates/Category.vue'
})
createPage({
path: '/shops/:slug',
component: './src/templates/Shop.vue'
})
})
}
We’ve created the dynamic pages. Now we need to set rewrite rules to work the page’s routes on live server.
Step 2 : Rewrite Rules for Apache
On the root directory of your server, create a file called .htaccess
and then open & paste the rules:
RewriteEngine On
RewriteRule ^products/([^/]*)$ products/_slug.html [NC,L]
RewriteRule ^shops/([^/]*)$ shops/_slug.html [NC,L]
RewriteRule ^categories/([^/]*)$ categories/_slug.html [NC,L]
Step 3 : Rewrite Rules for Nginx
In the Nginx configuration file, write rules like these:
location /products {
rewrite ^/products/([^/]*)$ /products/_slug.html break;
}
location /shops {
rewrite ^/shops/([^/]*)$ /shops/_slug.html break;
}
location /categories {
rewrite ^/categories/([^/]*)$ /categories/_slug.html break;
}
Step 4 : Rewrite Rules for Netlify
Go to the static folder and create a file called “_redirects“. Then write rules like these:
/products/* /products/_slug.html 200
/shops/* /shops/_slug.html 200
/categories/* /categories/_slug.html 200
The article is over. Thanks for reading.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.