.htaccess for routing Single Page Applications

Question

I am developing a single page application where I pushing various module loads to the URL as path. We have inbuilt handler to change the path to parameters internally.

But to make it bookmarkable we have to use .htaccess to manage the paths.

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^applications/sample([/]+[a-z]+)+$ applications/sample/index.html [L]
</IfModule>

Now this is working till the first level....

applications/sample/module is loading fine.... but

applications/sample/module/submodule is not working...

Where am I going wrong with the RewriteRule ? I am looking for the following rule....

<rule>
  <note>Rewrite sample/module1, sample/module2, ... sample/moduleX to /sample/index.html and sub-modules as well</note>
  <from>/sample/(home|book|table|...|module)(.*)</from>
  <to>/sample/index.html</to>
</rule>

Describe "not working". Your regex is not optimal (it allows multiple slashes for instance), however, it should match the URLs given. Maybe there is something different with your "real" URLs? — MrWhite
– MrWhite, Commented Mar 3, 2016 at 12:17
@w3dk I have updated the question if that helps... Not working means the index.html seems to loading since there is no server error... but the js, css files etc are getting 404 — Debajyoti Das
– Debajyoti Das, Commented Mar 3, 2016 at 12:25
So, the code you have posted "is working", but you are not getting the desired results. It sounds as if you are using relative URLs to your JS/CSS resources? Where are these resources located? Are they also getting rewritten? — MrWhite
– MrWhite, Commented Mar 3, 2016 at 12:30
for the first path its working sample/module ... but for sample/module/sub-module its not working... the css js file are throwing 404 — Debajyoti Das
– Debajyoti Das, Commented Mar 3, 2016 at 12:40

Community · Accepted Answer · 2017-04-13 12:33:14Z

1

for the first path its working sample/module ... but for sample/module/sub-module its not working... the css js file are throwing 404

This can happen if you are using relative URLs to your external resources (JS, CSS and images) in your client-side HTML. Since the 2nd URL is effectively in a (virtual) "subdirectory", any relative client-side URLs are relative to that "subdirectory", not the parent directory, as it is with the first URL.

See my answer on Pro Webmasters for more detail:
.htaccess rewrite url leads to missing css

If instead, the linked external resources (ie. JS and CSS files) are being rewritten then you can prevent this by adding some conditions/exceptions. To exclude rewritting when accessing static resources (physical files on the filesystem):

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^applications/sample(/[a-z]+)+$ applications/sample/index.html [L]

I also tweaked the RewriteRule regex to prevent multiple slashes being accepted. (I assume you don't need to catch multiple slashes?)

edited Apr 13, 2017 at 12:33

CommunityBot

11 silver badge

answered Mar 3, 2016 at 12:46

MrWhite

46.4k9 gold badges67 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Debajyoti Das Over a year ago

No, the issue is not with the js, css I guess. The path is not getting selected fully by the regex in .htaccess . Its passing only sub-module to index.html while it should pass module/sub-module

MrWhite Over a year ago

I'm not sure what you mean. If the JS and CSS files (static resources) are being rewritten as well, then they can be omitted by only rewritting URLs that don't map to filesystem resources. I've updated my answer.

MrWhite Over a year ago

The .htaccess directive is not "passing" anything. You said in comments that "index.html seems to [be] loading since there is no server error" - so the rewrite is working as intended. The rest is then up to your "inbuilt handler to change the path to parameters internally". What is the URL in your HTML for your JS and CSS files? What JS and CSS URLs are being requested that generate the 404?

Collectives™ on Stack Overflow

.htaccess for routing Single Page Applications

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related