How to structure your web/mobile app (part 1): URLs

URLs for organising project files

URLs are entry points to your application. You are expected to return some kind of response when a request is made at a specific URL. Let’s just keep the folder structure in sync with the URL structure. Here is how it can look for an e-commerce website.

src/
---- pages/
-------- index.js
-------- categories/
------------ index.js
-------- products/
------------ index.js
-------- products/details/
----------------- index.js

URLs for mobile apps

Each screen in an app is equivalent to a web page. It’s a very good idea to assign a URL for each screen. Same structure posted above can be used in a react native application as well. This is useful for:

  • Deep links: You don’t have to figure out a new way of mapping deep link values with screens. Deep links are URLs, so the routing convention is already setup!
  • Analytics: The URLs uniquely identify the screens, which can be used to identify the events with a specific screen
  • Namespacing: There is a direct mapping between folder structure and URL paths. This unification removes the need for unnecessary decision making towards where to put the code that handles a specific screen

A good URL structure

There has already been a lot of discussion about the URL structure. In general, keep the URLs resourceful . There is no point reinventing it. Borrowing from Ruby on Rails, Laravel, AdonisJS and such, here’s how I usually structure the URLs:

{collection-name}/{operation-name}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store