0

I have an Angular 2+ application running. I would like to install Drupal in a subfolder and have my Angular application to iframe the contents.

Ideal Folder Structure:

/             - Angular  
/content      - Drupal  

I have an existing rewrite rule to rewrite all URLs to index.html. Drupal works fine with pages like http://myapp.com/content/admin, but if I am accessing a page like http://myapp.com/en/page, it will be redirected to the index.html file of the Angular application.

How do I configure Drupal to make it add /content to its URLs?

I am hosting them on IIS. These are the rewrite rules I have now.

<rewrite>
  <rules>
    <clear />
    <rule name="HTTPS Redirection" stopProcessing="true">
      <match url="(.*)" />
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
        <add input="{HTTPS}" pattern="^OFF$" />
      </conditions>
      <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" />
    </rule>
    <rule name="Angular Routes" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="./index.html" />
    </rule>
  </rules>
</rewrite>
  • Or expose JSON endpoints and write Angular services to fetch the data? – Kevin Aug 12 at 20:40
  • We have thought of that before, but we would like to let our marketing team to manage the contents of those pages, that is why we came to this direction. I will try to remove the clean URL and see how it works. – Ryan Teh Aug 13 at 14:13
0

Finally got it working, the following are the changes I've made. I am writing this here in case anyone faces the same problem.

  1. I noticed there was another web.config file in root of Drupal folder (/content) and it contains a few rewrite rules.
    I've changed the last rewrite rule which rewrite all requests to index.php, it now looks like this:
<!-- Pass all requests not referring directly to files in the filesystem to index.php. -->
<rule name="Short URLS" stopProcessing="true">
  <match url="^(.*)$" ignoreCase="false" />
  <conditions>
    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
    <add input="{URL}" pattern="^/favicon.ico$" ignoreCase="false" negate="true" />
  </conditions>
  <action type="Rewrite" url="/content/index.php" /> <!-- CHANGES IN THIS LINE, ADDED '/content'/ in front of index.php -->
</rule>        
  1. Modified .htaccess file in root of Drupal folder and added this line RewriteBase /content, below this line # RewriteBase /

  2. Modified the web.config file in root folder of Angular App (/) to the following:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <!-- Install IIS url rewrite module. -->
  <system.webServer>
    <rewrite>
      <rules>
        <clear />
        <rule name="Angular Routes" stopProcessing="true">
          <match url="(.*)" negate="false" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{URL}" pattern="^/content/(.*)$" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

</configuration>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.