Deploying Multiple Repositories To a Single Site -- Potentially Missing Something Simple

Support
1

Apologies in advance - I’m obviously missing something simple considering this is somewhat clearly described by @laura in deploying multiple repositories for a single site, but I am having difficulty and am confused by the Step #1 Instruction in the link above, and have been troubleshooting it for days.

As described in the instructions at deploying multiple repositories for a single site

(Something Is done wrong in the below steps)
Thursfar I have:

  1. Deployed the web-app map as a subdirectory of the published site. So if I understand correctly, based on the above instructions and another forum post - I setup my deploy settings for my web-app as seen below.
    netlifypost1
    netlifypost12736×1517 70.8 KB
  • In the web-app repository on github - I need to move all the contents of the vue app into a /map/ folder using relative path names through the HTML/CSS/Javascript so that I don’t screw up how the web-app operates inside this subfolder.
  1. Add a proxy redirect to my static website repository by creating a _redirects file in the folder which contains
#this redirect doesn't seem to work, but I think I wrote this correctly
/map/* https://frosty-heisenberg-cf3b94.netlify.app/map/:splat 200!

#I also added dummy-tester redirects to make sure I'm doing this correctly, these both work
*/testing_mapbox        https://www.mapbox.com
*/testing_yahoo      https://yahoo.com
  1. Deploy the web-app and test that it work: https://frosty-heisenberg-cf3b94.netlify.app/
  1. Test the static website redirect works at Tucson Pathways | Safer Bike Commuting which does not work =(

I’ve tried playing with the following to no luck:

  • Setting my deploy settings web-map Base Directory as map
  • Setting my deploy settings web-map Publish Directory as map/dist/
  • Setting my deploy settings web-map Publish Directory as dist/map/
  • Setting my deploy settings web-map Publish Directory as /dist/
  • Moving my web-map github repo into a map subfolder
  • Moving my web-map github repo into its normal root folder

What am I missing?

2

Would you try switching to absolute URLs for your CSS/JS files? You can also try using Netlify’s Asset Optimization as it would get converted to absolute URLs. The only problem part probably is that your assets are missing.

3

Solved!

Would you try switching to absolute URLs for your CSS/JS files?

Okay, so you’re right, but the solution was slightly more nuanced than switching the absolute paths because I use Vue.js and the vue-cli npm plugin to build out the structure of my app. I’ll leave this here in case it helps someone else who uses Vue-CLI, or React-CLI or webpack to scaffold out the architecture of their projects.

For me the solution was open my vue.config.js file, I changed the third line in the following to /map/ from /

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/map/' #production deployment location -- i.e. tucsonpathways.org/map
    : '/' #development deployment location -- i.e. localhost:8080 (for myself during development - port 8080 is just the default port of the Vue-Cli)
}

This is discussed in more depth here - Configuration Reference | Vue CLI

By setting my web-app’s production path to /map/ rather than the default / in the this puts it in the correct with the _redirect file I specified in my separate static website repo which specifies

/map/* https://frosty-heisenberg-cf3b94.netlify.app/:splat 200!

Hopefully this info in combo with the instructions will help other vue.js/netlify users.

Best
Dylan

4

Hi, @Dylansc22. Wow! Just wow!

:thank_you: :thank_you: :thank_you:

Now that is a detailed description of both the root cause and the exact solution you used to resolve the issue. Thank you so much for sharing the solution you found with the rest of the community. This will undoubtedly help others in the future (and was quite interesting to read).

1 Like
5

Now that is a detailed description of both the root cause and the exact solution you used to resolve the issue.

Ha, Just writing it in a way to help my fellow self-taught developers that tend to rely on the verbose solutions =P. And on that note of learning, I’m so glad I’ve discovered netlify! This platform is streamlining so much of my development workflow - domains, certificates, deployment, etc… So glad I found it!

1 Like