allow app to be run in a sub folder #340

gilesbradshaw · 2024-03-09T22:20:29Z

This allows opn form to be run in a subdirectory.
I wanted this so I can authenticate form submissions made on my web site. I have a proxy which gets the user from http-ony cookies and then strips the cookies before sending the post on to opnform.

the client env is as follows:

NUXT_PUBLIC_APP_URL=https://mysite.com/forms
NUXT_PUBLIC_API_BASE=https://mysite.com/forms/api
NUXT_APP_BASE_URL=/forms/

nb the NUXT_APP_BASE_URL value (nuxt uses this)

I struggled with getting this value in runtimeConfig.js (not sure why 🤷) so in the code I use the full NUXT_PUBLIC_APP_URL value.

discussed on issue #337

Summary by CodeRabbit

New Features
- Enhanced dynamic URL generation for email verification, improving security and flexibility.
- Improved API route configurations with dynamic middleware and rate limiting based on environment settings.
Enhancements
- Updated various components and pages to dynamically set image, video, and script source URLs using runtime configuration. This includes changes in the Open Graph image URL, navigation bar, form statistics, footer, AI feature section, welcome features, error page, AI form builder, and homepage. This ensures that resources are correctly loaded based on the application's URL configuration, enhancing the app's flexibility and user experience.

coderabbitai · 2024-03-09T22:20:38Z

Walkthrough

The update primarily focuses on enhancing the application's flexibility and scalability by dynamically generating URLs for various resources, including email verification, API routing, and media assets in both server and client components. It leverages runtime configurations and environment variables to adapt to different deployment environments seamlessly. The changes span across backend and frontend, ensuring that the application remains robust and easily configurable across different setups.

Changes

Files	Change Summary
`app/Exceptions/VerifyEmailException.php`	Updated URL generation for email verification to use `APP_URL` environment variable.
`app/Providers/RouteServiceProvider.php`	Uses `$_ENV['APP_API_PREFIX']` or defaults to `'api'` for middleware and rate limiting.
`client/app.vue` `client/components/global/Navbar.vue` `client/pages/forms/[slug]/index.vue` `client/pages/home.vue`	Updated various client components to dynamically set resource URLs using runtime configuration.

Related issues

Migration from Vue.js SPA to Nuxt with Universal Rendering #252: The PR's focus on enhancing flexibility and scalability through dynamic URL generation and environment variable usage aligns with the objectives of converting to a Nuxt app, which emphasizes maintaining functionality and updating documentation. This suggests a potential link due to the shared goal of improving the application's adaptability and maintainability.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit-tests for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit tests for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit tests.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

coderabbitai

Review Status

Actionable comments generated: 5

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 30587fb and 8288f30.

Files ignored due to path filters (2)

client/components/vendor/appsumo/AppSumoBilling.vue is excluded by: !**/vendor/**
client/components/vendor/appsumo/AppSumoRegister.vue is excluded by: !**/vendor/**

Files selected for processing (13)

app/Exceptions/VerifyEmailException.php (1 hunks)
app/Providers/RouteServiceProvider.php (2 hunks)
client/app.vue (1 hunks)
client/components/global/Navbar.vue (1 hunks)
client/components/open/forms/components/FormStats.vue (1 hunks)
client/components/pages/OpenFormFooter.vue (1 hunks)
client/components/pages/welcome/AiFeature.vue (2 hunks)
client/components/pages/welcome/Features.vue (3 hunks)
client/error.vue (1 hunks)
client/pages/ai-form-builder.vue (14 hunks)
client/pages/forms/[slug]/index.vue (1 hunks)
client/pages/home.vue (1 hunks)
client/pages/index.vue (2 hunks)

Additional comments: 15

client/error.vue (1)

6-6: The dynamic setting of the src attribute using useRuntimeConfig().public.appUrl is a good practice for supporting applications running in a subdirectory. This ensures that the image URL is correctly resolved regardless of the deployment environment. Just ensure that public.appUrl is correctly set in your nuxt.config.js under the publicRuntimeConfig section.

client/components/pages/OpenFormFooter.vue (1)

11-11: Dynamically setting the src attribute for the logo image using useRuntimeConfig().public.appUrl is a good practice for Nuxt.js applications, especially when supporting deployment in subdirectories. This ensures that the image URL is correctly resolved in different environments. Just make sure that public.appUrl is properly configured in your nuxt.config.js.

client/app.vue (1)

51-51: Setting the ogImage dynamically using useRuntimeConfig().public.appUrl is a good approach to ensure that the Open Graph image URL is correctly resolved across different deployment environments. This is particularly important for SEO and when sharing links on social media. Ensure that public.appUrl is correctly set in your nuxt.config.js to reflect the actual URL of your application.

client/components/open/forms/components/FormStats.vue (1)

16-16: Dynamically setting the image source using useRuntimeConfig().public.appUrl is a good practice for ensuring that resources are correctly loaded when the application is run from a subdirectory. This approach enhances the flexibility of the application to adapt to different deployment environments. Just ensure that public.appUrl is correctly set in your nuxt.config.js.

client/pages/forms/[slug]/index.vue (1)

169-169: Dynamically setting the script source using useRuntimeConfig().public.appUrl is a good practice for ensuring that external scripts are correctly loaded when the application is run from a subdirectory. This approach enhances the flexibility of the application to adapt to different deployment environments. Just ensure that public.appUrl is correctly set in your nuxt.config.js.

client/components/pages/welcome/AiFeature.vue (2)

8-8: Dynamically setting the background pattern image source using useRuntimeConfig().public.appUrl is a good practice for ensuring that resources are correctly loaded when the application is run from a subdirectory. This approach enhances the flexibility of the application to adapt to different deployment environments. Just ensure that public.appUrl is correctly set in your nuxt.config.js.

87-87: Similarly, dynamically setting the illustration image source using useRuntimeConfig().public.appUrl is a good practice. This ensures that the image URL is correctly resolved across different deployment environments, enhancing the application's adaptability. Ensure that public.appUrl is correctly set in your nuxt.config.js.

client/pages/home.vue (1)

44-44: Dynamically setting the image source for the "search not found" image using useRuntimeConfig().public.appUrl is a good practice for ensuring that resources are correctly loaded when the application is run from a subdirectory. This approach enhances the flexibility of the application to adapt to different deployment environments. Just ensure that public.appUrl is correctly set in your nuxt.config.js.

client/components/pages/welcome/Features.vue (1)

23-23: The update to use a dynamic URL for the image path in the "Create" step is a good approach to ensure images load correctly when the application is hosted in a subdirectory. Please ensure that all instances where dynamic URLs are used follow this pattern for consistency.

client/components/global/Navbar.vue (1)

8-8: The update to dynamically include the application's URL using useRuntimeConfig().public.appUrl for the <NuxtImg> component's src attribute is a good approach to support running the application in a subdirectory. Ensure that the appUrl is correctly configured in all environments to prevent issues with resource loading. Additionally, consider reviewing the security implications of dynamically constructing URLs to avoid potential vulnerabilities, such as Open Redirects.

client/pages/index.vue (2)

6-6: The dynamic setting of the image source using useRuntimeConfig().public.appUrl for the background pattern is consistent with the objective of supporting subdirectory deployment. Ensure that the appUrl is correctly set in the environment configurations. Additionally, review the security implications of dynamically constructing URLs to mitigate potential vulnerabilities.

91-91: Updating the product cover image source to dynamically include the application's URL using useRuntimeConfig().public.appUrl aligns with the goal of enabling subdirectory deployment. As with other dynamic URL constructions, ensure the appUrl is properly configured and assess any security concerns related to URL manipulation.

client/pages/ai-form-builder.vue (3)

6-6: Using dynamic URLs for resources like images is a good practice when supporting applications in subdirectories. This ensures that the resources load correctly regardless of the application's base URL.

35-35: The dynamic URL for the video source is correctly implemented. This ensures that the video loads correctly when the application is hosted in a subdirectory.

45-45: All instances of dynamic URLs for images and icons are correctly implemented using useRuntimeConfig().public.appUrl. This consistent approach ensures that all resources are loaded correctly, supporting the application's functionality in a subdirectory environment.

Also applies to: 58-58, 71-71, 107-107, 116-116, 134-134, 141-141, 156-156, 163-163, 203-203, 217-217, 231-231, 245-245, 425-425, 427-427, 429-429

client/components/pages/welcome/Features.vue

app/Exceptions/VerifyEmailException.php

app/Providers/RouteServiceProvider.php

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 8288f30 and 60afc1a.

Files selected for processing (1)

client/components/pages/welcome/Features.vue (3 hunks)

Files skipped from review as they are similar to previous changes (1)

client/components/pages/welcome/Features.vue

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 60afc1a and 6bf3096.

Files selected for processing (3)

app/Exceptions/VerifyEmailException.php (1 hunks)
app/Providers/RouteServiceProvider.php (2 hunks)
client/components/pages/welcome/Features.vue (3 hunks)

Files skipped from review as they are similar to previous changes (3)

app/Exceptions/VerifyEmailException.php
app/Providers/RouteServiceProvider.php
client/components/pages/welcome/Features.vue

JhumanJ

Hey thanks a lot for working on this. I left some comments. I don't think we should be adding ${useRuntimeConfig().public.appUrl} on every file, there must be another way. If we set the appurl properly then we shouldn't need this should we?

JhumanJ · 2024-03-12T11:40:38Z

app/Exceptions/VerifyEmailException.php

@@ -14,7 +14,7 @@ public static function forUser($user)
    {
        return static::withMessages([
            'email' => [__('You must :linkOpen verify :linkClose your email first.', [
-                'linkOpen' => '<a href="/email/resend?email='.urlencode($user->email).'">',


For this we should use the front_url helper function

JhumanJ · 2024-03-12T11:41:06Z

app/Providers/RouteServiceProvider.php

@@ -30,7 +30,7 @@ public function boot()
        $this->registerGlobalRouteParamConstraints();

        $this->routes(function () {
-            Route::middleware('api')


Hum we shouldn't not change the middleware name this should be left as it is - this is a middleware name, not a URL prefix

JhumanJ · 2024-03-12T11:41:12Z

app/Providers/RouteServiceProvider.php

@@ -43,7 +43,7 @@ public function boot()
     */
    protected function configureRateLimiting()
    {
-        RateLimiter::for('api', function (Request $request) {


Same as the above

JhumanJ · 2024-03-12T11:41:39Z

client/app.vue

@@ -48,7 +48,7 @@ export default {
    useOpnSeoMeta({
      title: 'OpnForm',
      description: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
-      ogImage: '/img/social-preview.jpg',
+      ogImage: `${useRuntimeConfig().public.appUrl}/img/social-preview.jpg`,


If appUrl is properly set with the subfolder path, why do we need this?

JhumanJ · 2024-03-12T11:41:52Z

client/components/global/Navbar.vue

@@ -5,7 +5,7 @@
        <div class="flex items-center">
          <NuxtLink :to="{ name: user ? 'home' : 'index' }"
                    class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
-            <NuxtImg src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"/>


Same as before - why need if appUrl is properly set with the subfolder path

JhumanJ · 2024-03-12T16:58:01Z

Hey thanks a lot for working on this. I left some comments. I don't think we should be adding ${useRuntimeConfig().public.appUrl} on every file, there must be another way. If we set the appurl properly then we shouldn't need this should we?

@gilesbradshaw tagging on this as I forgot to do it earlier

gilesbradshaw · 2024-03-13T12:40:40Z

Thanks a lot for your comments - I shall work on this when I get the time. I assume you'd be willing to accept once issues are sorted?

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 6bf3096 and 965c77f.

Files selected for processing (4)

client/app.vue (1 hunks)
client/components/global/Navbar.vue (1 hunks)
client/pages/forms/[slug]/index.vue (1 hunks)
client/pages/home.vue (1 hunks)

Files skipped from review as they are similar to previous changes (4)

client/app.vue
client/components/global/Navbar.vue
client/pages/forms/[slug]/index.vue
client/pages/home.vue

JhumanJ · 2024-03-13T14:01:40Z

Thanks a lot for your comments - I shall work on this when I get the time. I assume you'd be willing to accept once issues are sorted?

Definitely

JhumanJ · 2024-03-25T15:05:47Z

Closing this for now, please re-open if needed.

allow app to be run in a sub folder

8288f30

coderabbitai bot reviewed Mar 9, 2024

View reviewed changes

gilesbradshaw and others added 5 commits March 9, 2024 22:27

Update client/components/pages/welcome/Features.vue

60afc1a

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Update client/components/pages/welcome/Features.vue

57ed82c

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Update app/Exceptions/VerifyEmailException.php

84c0a98

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Update app/Providers/RouteServiceProvider.php

c45b2a0

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Update app/Providers/RouteServiceProvider.php

d898e78

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai bot reviewed Mar 9, 2024

View reviewed changes

Merge branch 'main' into main

6bf3096

coderabbitai bot reviewed Mar 11, 2024

View reviewed changes

Merge branch 'main' into main

5a20cc9

JhumanJ requested changes Mar 12, 2024

View reviewed changes

Merge branch 'main' into main

965c77f

coderabbitai bot reviewed Mar 13, 2024

View reviewed changes

JhumanJ closed this Mar 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

allow app to be run in a sub folder #340

allow app to be run in a sub folder #340

gilesbradshaw commented Mar 9, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 9, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

CodeRabbit Discord Community

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

JhumanJ left a comment

JhumanJ Mar 12, 2024

JhumanJ Mar 12, 2024

JhumanJ Mar 12, 2024

JhumanJ Mar 12, 2024

JhumanJ Mar 12, 2024

JhumanJ commented Mar 12, 2024

gilesbradshaw commented Mar 13, 2024

coderabbitai bot left a comment

JhumanJ commented Mar 13, 2024

JhumanJ commented Mar 25, 2024

allow app to be run in a sub folder #340

allow app to be run in a sub folder #340

Conversation

gilesbradshaw commented Mar 9, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Mar 9, 2024 • edited Loading

Walkthrough

Changes

Related issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

CodeRabbit Discord Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

JhumanJ left a comment

Choose a reason for hiding this comment

JhumanJ Mar 12, 2024

Choose a reason for hiding this comment

JhumanJ Mar 12, 2024

Choose a reason for hiding this comment

JhumanJ Mar 12, 2024

Choose a reason for hiding this comment

JhumanJ Mar 12, 2024

Choose a reason for hiding this comment

JhumanJ Mar 12, 2024

Choose a reason for hiding this comment

JhumanJ commented Mar 12, 2024

gilesbradshaw commented Mar 13, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

JhumanJ commented Mar 13, 2024

JhumanJ commented Mar 25, 2024

gilesbradshaw commented Mar 9, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 9, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)