Menu icon Foundation
Solution: Making pretty URLs work on development

I recently found out how to use Gulp to make BorwserSync serve URLs in the "pretty" format and I thought I'd share how simple it was! I'm a designer, so forgive me if my approach sounds obvious to someone with better developer skills.

Let's assume you have a local site running on port 8000 (http://localhost:8000) and you have a different pages, such as "Work" and "Contact". Now you can create a page for work, say work.html and see it in your page (http://localhost:8000/work.html), but so called pretty URL (http://localhost:8000/work) won't work out of the box.

It turns out you can make BrowserSync to act so that it works. Here's the trick:

In the gulpfile you can find something similar to this:

 // Start a server with BrowserSync to preview the site in
 function server(done) {
   browser.init({
     server: PATHS.dist, port: PORT
   });
   done();
 }

Replacing it with this will make pretty URLs work:

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: {
      baseDir: "./dist",
      serveStaticOptions: {
        extensions: ['html'] // This is the trick!
      }
    },
  });
  done();
}

That's it! If there's anything that you developers see inaccurate, let me know and I'll make necessary amendments.

PS. I found the solution from this issue: https://github.com/BrowserSync/browser-sync/issues/1055

gulpprettyurlprettyurlbrowsersync

I recently found out how to use Gulp to make BorwserSync serve URLs in the "pretty" format and I thought I'd share how simple it was! I'm a designer, so forgive me if my approach sounds obvious to someone with better developer skills.

Let's assume you have a local site running on port 8000 (http://localhost:8000) and you have a different pages, such as "Work" and "Contact". Now you can create a page for work, say work.html and see it in your page (http://localhost:8000/work.html), but so called pretty URL (http://localhost:8000/work) won't work out of the box.

It turns out you can make BrowserSync to act so that it works. Here's the trick:

In the gulpfile you can find something similar to this:

 // Start a server with BrowserSync to preview the site in
 function server(done) {
   browser.init({
     server: PATHS.dist, port: PORT
   });
   done();
 }

Replacing it with this will make pretty URLs work:

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: {
      baseDir: "./dist",
      serveStaticOptions: {
        extensions: ['html'] // This is the trick!
      }
    },
  });
  done();
}

That's it! If there's anything that you developers see inaccurate, let me know and I'll make necessary amendments.

PS. I found the solution from this issue: https://github.com/BrowserSync/browser-sync/issues/1055