I have the following scenario.
S3 bucket and several directories, one directory for each react application
All the paths of each react application start with the name of the directory hosted in the s3 bucket
For example:
S3 Directories
|--/
|--/first-app/
|--/second-app/
React routes of first-app
const routes = [
{
path: '/',
component: Empty,
exact: true,
},
{
path: '/first-app',
component: Layout,
routes: [
{ path: '/first-app/create', component: CreateCommponent},
{ path: '/first-app/login', component: Login },
{ path: '/first-app/logout', component: Logout },
],
},
]
React routes of second-app
const routes = [
{
path: '/',
component: Empty,
exact: true,
},
{
path: '/second-app',
component: Layout,
routes: [
{ path: '/second-app/create', component: OtherComponent},
{ path: '/second-app/login', component: Login },
{ path: '/second-app/logout', component: Logout },
],
},
]
How do I make cloudFront serve each application in each directory independently but under the same domain?
https://my.domain.com/first-app >> serve react application middle index.html of first-app
https://my.domain.com/second-app>> serve react application middle index.html of second-app
You can do this using Lambda#Edge in order to manipulate the request parameters before sending the request to the bucket. here is a similar example: here
Related
I use Magento2 for a PWA with react as CMS and Venia-ui as theme, and I'm totally new to this. I want to change the link of cart page with a local-intercept.js but when I go to the link, the page is not displayed.
The page not displayed
My package.json
"pwa-studio": {
"targets": {
"intercept": "./src/targets/local-intercept"
}
}
My local-intercept.js
function localIntercept(targets) {
targets.of('#magento/venia-ui').routes.tap(routes => [
...routes,
{
name: "Cart",
pattern: "/cart",
exact: true,
path: "../overrides/venia-ui/lib/code/CartPage"
},
{
name: "CreateAccountPage",
pattern: "/create-account",
exact: true,
path: "../overrides/venia-ui/lib/code/CreateAccountPage"
}
]);
}
module.exports = localIntercept;
I already tried to display the cart page and it works.
The path to access the cart page on my local-intercept is ok.
I want to fix the bug of the cart page before the "create account page". Maybe it will fix the bug for this two pages at the same time
#magento/pwa-buildpack: 7.0.0
#magento/venia-ui: 5.0.0
react: 16.9.0
Try like this and return routes,
module.exports = targets => {
targets.of('#magento/venia-ui').routes.tap(routes => {
routes.push({
name: 'Login',
pattern: '/customer/login',
path: require.resolve(
'../overrides/venia-ui/components/LogIn/LogIn.js'
)
}),
routes.push({
name: "Register",
pattern: '/customer/register',
path: require.resolve(
'../overrides/venia-ui/components/LogIn/Register/RegisterUser.js'
)
}),
routes.push({
name: "Forget Password",
pattern: '/customer/forgetpassword',
path: require.resolve(
'../overrides/venia-ui/components/ForgotPassword/forgotPassword.js'
)
}),
routes.push({
name: "Customer Profile",
pattern: '/account-profile',
path: require.resolve(
'../overrides/venia-ui/components/AccountProfilePage/accountProfilePage.js'
)
});
return routes;
});};
And no need to give like,
"intercept": "./src/targets/local-intercept"
You can give,
"intercept": "src/targets/local-intercept"
I have developed application using angular4. I am able load the Application and browse all pages in chrome, mozila and safari browser except IE browser. I have latest internet explorer 11 version. I am not getting why application working in IE, I searched couple of articles mentioned to change in route I have done it but still I am not able load the pages. Can anybody tel me how resolve this issue. Application deployed in tomcat server. Please find the screenshot for the more reference. Great appreciate.
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './home/dashboard/dashboard.component';
import { AdminusersComponent } from './home/dashboard/adminusers/adminusers.component';
import { CreatenewclaimComponent } from './home/dashboard/createnewclaim/createnewclaim.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent,
children: [
{ path: '', component: DashboardComponent, pathMatch: 'full' },
{ path: 'Createnewclaim', component: CreatenewclaimComponent },
{ path: 'adminUsers', component: AdminusersComponent }
]
},
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {
}
IE Browser
tomcat server deployed location.
Working in the chrome browser, safari, mizilla
I created child router in my router configuration and configured my child router in way that it redirects to parent router component. But the configuration doesn't work as expected. Instead it redirects to error page as it didn't find the configured path.
My app.route.ts file
import { ModuleWithProviders } from '#angular/core';
import { CanActivate, Routes, RouterModule } from '#angular/router';
// Component
import { HomeRouterComponent } from '../../modules/home/homerouter.component';
import { ChannelComponent } from '../../modules/channels/channel.component';
import { ErrorComponent } from '../../modules/errorPage/error.component';
const appRoutes: Routes = [
{
path: 'home',
component: HomeRouterComponent,
canActivate: [LoginCheck]
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
{
path: 'channel',
component: ChannelComponent,
children: [
{
path: '',
redirectTo: 'channel',
pathMatch: 'full',
}
]
},
{
path: '**',
component: ErrorComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
May I ask why you have a child route without a path? But since it's not an actual path, you wouldn't need to redirect anywhere, since there is no change in url. I had a similar setup where I did not want to show a child initially upon navigation. Leaving it empty worked fine for me, so try:
{
path: 'channel',
component: ChannelComponent,
children: [
{
path: '',
}
]
}
I have a SPA which has 2 tabs in which data is rendered. The component and corresponding URL structure is as follows:
URL --> Component
/ --> PostContainer
/create --> MessageFormContainer
/update/:id --> MessageUpdatesContainer
/update/:id/infoCreate --> InfoCreateContainer
/update/:id/infoView/:id --> InfoViewContainer
If I define the routes with each having its own specific URL (sample 1), then the router works; but if use childRoutes to nest the components (sample 2), the the formed URL is displayed the URL bar, but nothing is rendered on the screen.
Sample 1:
const AppRoutes = {
path: '/',
component: MainContainer,
indexRoute: { component: PostsContainer },
childRoutes: [{
path: 'create',
component: MessageFormContainer
},{
path: 'update/:id',
component: MessageUpdatesContainer,
},{
path: 'update/:id/infoCreate',
component: InfoCreateContainer
},{
path: 'update/:id/infoView/:id',
component: InfoViewContainer
}]
}
Works.
Sample 2:
const routes = {
path: '/',
component: MainContainer,
indexRoute: { component: PostsContainer },
childRoutes: [
{ path: 'create', component: MessageFormContainer },
{
path: 'update/:id',
component: MessageUpdatesContainer,
childRoutes: [{
path: 'infoCreate',
component: InfoCreateContainer
},{
path: '/infoView/:id',
component: InfoViewContainer
}]
}]
}
]
}
Does not work. Only the URL is updated in the URL bar but nothing is rendered on the screen. The only change made to the component for Sample 2 is that they contain this.props.children tags to accommodate the childRoute components.
Any ideas would be helpful...thanks in advance!
I'm having some issues working with react-router and webpack-dev-server to achieve nested url routing.
webpack.config.js
output: {
path: path.resolve(__dirname, 'build'),
publicPath: "/", <-- this enabled routing to /register/step2
filename: "js/bundle.js",
},
routes.js
const routes = {
childRoutes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/register/step2', component: SecondStep },
]
};
export default (<Router routes={routes} history={createBrowserHistory()} />);
When clicking around in the appliation, I can get to /register/step2 but once I hit refresh in the browser, my common.js and bundle.js is missing: 404, since it's trying to load everything from /register/ directory.
Can anyone help? Thanks.
I figured it out. 2 things that is needed to enable this.
webpack.config.js
devServer: {
historyApiFallback: true <-- this needs to be set to true
}
routes.js
const routes = {
childRoutes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/register', component: Register, childRoutes: [
{ path: 'step2', component: SecondStep },
] },
]
};
Make sure your webpack configuration file contains following code:
output: {
publicPath: '/'
},
devServer: {
historyApiFallback: true
}
See more in this article
If you use hashHistory instead of createBrowserHistory() it will keep the server from requesting to your current url on your server.
export default (<Router routes={routes} history={hashHistory} />);