I'm new to Vue and am trying to figure out the best way to do the below.
Let's use example.com as our domain name.
We have a Vue.js app deployed that allows our customers to create their own subdirectory in our Vue.js app (e.g., example.com/user1page and example.com/user2page). Right now example.com goes to a Vue.js login page
Marketing recently sent us a home page (built in pure HTML/CSS/JS) that they need to display at example.com. Is it possible for me to upload the HTML/CSS/JS for that page in a Vue static asset folder and render that for example.com; then render our actual Vue.js app for anything example.com/*?
Due to business reasons we cannot:
Change the vue.js app to a different domain or subdomain (because customers have already published pages)
Change the marketing homepage to a different domain / subdomain / subdirectory
As an aside, we're using Clouflare for our DNS. Unfortunately their page rules won't be able to solve this issue.
Any help would be greatly appreciated.
Thanks very much!
Ed
I would solve this with a webserver configuration if you have access to it.
In NGINX you can define different locations with different root-folders.
So if a user access to main page it would it the first route and serve the static page and if it would it the regex for the client page it would serve the vue application (you could also specify the vue server here)
location / {
root /var/www/static-html-folder;
}
location /paths-to-clientpages {
root /var/www/vuepage;
}
For the location paths you can use regex to match all routes
I figured out that the way to do this in Netlify is to add the following command to your toml file:
[[redirects]]
from = "/"
to = "your marketing page URL"
status = 200
force = true
Related
In a Nuxt ("spa" mode) project I have a url with a dynamic param /shop/:product, which can be as such:
/shop/ipad-128gb-rose-gold
/shop/subway-gift-card
/shop/any-string
etc.
Using this directory structure works fine in development environment:
pages/
shop/
_product.vue
However it does not work in production. Looking to the generated bin/ folder I see that there is nothing inside shop/ directory. And I see that Nuxt mentions a solution here: https://nuxtjs.org/api/configuration-generate/#routes
But in my situation, I don't know what the :product param will be (could be any string).
I am fetching the product details in pages/shop/_product.vue from the server (if it exists), otherwise handling the error. So now how do I do that in a production build?
I think I am misunderstanding the Nuxt solution -- am I really supposed to generate all possible routes for every existing product slug??
The solution for me was to use:
// nuxt.config.js
export default {
...
generate: {
fallback: true
}
}
I am serving the app out of the built dist/ folder. And I came across this in the Netlify deployment docs:
For a single page app there is a problem with refresh as by default on
netlify the site redirects to "404 not found". For any pages that
are not generated they will fallback to SPA mode and then if you
refresh or share that link you will get Netlify's 404 page. This is
because the pages that are not generated don't actually exist as they
are actually a single page application so if you refesh this page you
will get a 404 because the url for that page doesn't actually exist.
By redirecting to the 404.html Nuxt will reload your page correctly in
SPA fallback.
The easiest way to fix this is by adding a generate property in your
nuxt.config and setting fallback: true. Then it will fallback to the
generated 404.html when in SPA mode instead of Netlify's 404 page.
References:
https://nuxtjs.org/faq/netlify-deployment/
https://nuxtjs.org/api/configuration-generate/#fallback
When you generate static pages, it produces directories and index.html in each one. How did you expect to have it dynamic if you serve static HTML?
You have 2 solutions:
don't use npm run generate. Run nuxt on the server. Using this solution, you avoid ajax in browser. Instead, nuxt performs it and sends the HTML to the browser. Good for SEO.
have your web server (nginx) point all requests to /index.html - at that point, javascript takes over and it can correctly find the slug and query the products via ajax. Bad for SEO because you need to use ajax to get the content after page finishes loading.
Documentation and configuration about this can be found at nuxt's web.
I'm generating various versions of my app in alternate languages. I'm using AOT (ahead of time) compilations, so I end up with static deployable sites in a structure that looks like this:
dist -
index.html -- entry file for the default (English language) app
-fr
index.html -- entry file for French language version
-de
index.html -- entry file for German language version
I can currently switch between the main language websites using a dropdown where the user can select their preferred language, and I then load the main entry file for the required site using plain JavaScript like this:
const baseUrl = window.location.origin;
window.location.href = baseUrl + '/' + requestedLanguage + '/index.html'; // e.g. requestedLanguage = 'fr'
This works, as it seems that requesting the actual index.html file means Angular won't interpret the request href as an Angular route.
What I want to happen though is that when the user enters a URL that already contains the language version in the path, I want that language version to be served. I also want the URL path preserved so that the Angular routing loads the appropriate component for the requested URL.
For example:
user enters myDomain.com/fr/myPage
the app under the /fr/ subdirectory is loaded, and the Angular routing in that app loads the related component for MyPage
Currently if I enter a URL myDomain.com/fr/myPage, the Angular routing tries to interpret the desired subfolder fr as a route, which doesn't exist, so I get the following error:
Error: Cannot match any routes. URL Segment: 'fr/instruments'
How can I load the required app and the correct component? There must be a way of getting Angular to recognise that the fr in the URL refers to a different app. Maybe I'm missing a build configuration or something? Here's my script in package.json for building the French language version:
"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",
just use Components instead of different separate apps and use below example
>
{path:'',component:EnHomeComponent},
{path:'contact',component:EnContactComponent},
{path:'fr',component:LayoutComponent,
children:[
{path:'',component:FrHomeComponent},
{path:'contact',component:FrContactComponent}]}
then you can directly access the pages by URL
Use angular router concept for different paths of English, France and Danish.
Then use the path based on language.
I was able to load differing language versions of the app by configuring the pipeline for my .NET back end like this, so that the Angular static index page is loaded for each different language app (referred to as 'SPA' in the code). It works by checking if there is an 'index.html' page for the first subfolder in the request URL (e.g. '/fr/', '/de/'), and it loads that page if it exists:
Startup.cs
public class Startup
{
public void Configuration()
{
app.Use((context, next) =>
{
if (!context.Request.Path.HasValue)
return next();
IFileInfo fi;
string spaIndex = "index.html";
Uri uri = new Uri(context.Request.Uri.ToString());
var segs = uri.Segments;
var folder = segs.Length > 1 ? String.Format("/{0}", segs[1]) : "/";
if (!physicalFileSystem.TryGetFileInfo(context.Request.Path.Value, out fi)) {
// check if this is a request for a sub-application, e.g an alternative language version
// if so, load the app
if (physicalFileSystem.TryGetFileInfo(String.Format("{0}{1}", folder, spaIndex), out fi))
{
context.Request.Path = new PathString(String.Format("{0}{1}", folder, spaIndex));
}
}
return next();
});
}
}
The remainder of the URL (the part after the language subfolder) is then interpreted as a route inside the app that has been loaded (e.g. the French language app). This means that the correct component is loaded for the app (I'm not entirely sure how this part is working - maybe the remainder of the path falls through to a different part of the .NET request pipeline and is passed onto the Angular app?)
Based on the comments on another of my questions (gradle how to add files javascript fies to a directory in the war file) I'm trying to use angular-cli to help build and manage an angular project. However, I cannot seem to find any documentation on how to create a second webpage in the project, which to me seems like a very basic task. I tried creating a "component" with ng g component {component name}, but this didn't add anything to the build result.
I had missed the section of the angular docs on routing since I did not make the connection between the word "routing" and what I wanted to do. Routing as described here works perfectly when using Node as your server. However, other web servers such as Tomcat (which I am using for this project) will not since ng build only generates an index.html file. Node knows that it should re-route URLs under the angular base to that file, but Tomcat doesn't. A proxy server such as apache needs to be placed in front of the Tomcat server to redirect the urls to the base url for the application.
With that out of the way, here is the basics of routing:
create a component for each "page" (the component does not need to be responsible for the whole page displayed. see 2)
create a "shell" component that contains features that will be on all pages e.g. toolbar, side navigation.
add <router-outlet></router-outlet> to the point in the shell component component where components for sub-URLs will appear (note that they are inserted into the DOM after this tag, not within it.)
in the imports for your module, add RouterModule.forRoot(). This function takes an array of Route. Each route has a path and a component property. path is the url (relative to the base url) that will cause component to be inserted into the DOM. Note that path values should not begin with a slash.
add a tags with the routerLink property bound to the url of your new page. Note that here, there should be a leading slash.
Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?
Edit
To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.
I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.
I think this architecture demands that there's either a server to handle route redirects or a SPA framework.
Is there something I'm missing?
your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.
Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.
Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.
I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.
It is not possible, but there is a workaround using url parameters like this:
my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games
const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"
Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.
BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.
I'm hosting a Backbone application on Amazon S3 using a custom domain name. The Backbone application router handles all routes under the root ('/'). I would like to use pushState, so there's no need for the # prefix on my application routes. Basically, i want all sub-routes to be routed by S3 to the domain root and let Backbone do the rest.
I added the following rule:
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>mydomain.com</HostName>
<ReplaceKeyPrefixWith>#</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
But this just adds the # sign prefix to all my sub-routes. I want to avoid that.
How do I set the redirection rules on my S3 bucket to route everything to the indexed document without having to add the #?
You say "just adds the # sign" but what that does is actually load the index.html page. That is because www.example.com/#my-folder/my-page/whatever is actually loading /index.html and sending the browser the #my-folder/my-page/whatever as a fragment. You could do it if you ran the website on a server, but not in S3. You could use push-state once the page loads to read the fragment #my-folder/my-page/whatever and rewrite it to my-folder/my-page/whatever, and I believe that would achieve what you're looking for.