We are in process of structuring our code folder project, which will contain multiple independent angular apps ( they may share common services, which can be injected into the apps )
We should be able to build and deploy each app separately ( have a independent gulpfile for each app)
I am not really sure how to share common services, i guess we would need a top level app which will contain one of the app when deployed.
How and where can i configure which app to be built or served when top level app is accessed.
I have looked at manually bootstrapping the angular app, but not sure where that code would go ?
Should each app have its own bower_components folder, or can they share from the top level app itself.
Any direction, links to blog will help.
Here is what i have come up so far:
apps/
common/
appOne/
components/
services/
appOne.js
index.html
appTwo/
...
...
bower_components/
index.html
package.json
Related
Disclaimer: I am not a frontend guy by trade. I am being asked to deploy an Angular application other engineers have created.
I have gone through the process of deploying an Angular application to GitPages and have also tried the handy Angular CLI GH Pages library. However, they both have the same issue, and I'm not sure if it's the application itself or how I am deploying it.
The base page loads fine, but all other resources (image/font files, links to other pages, etc.) do not load properly. This is because they are not using the proper base URL; our corporate GitHub makes us use https://....com/<org>/<repo> as the URL. All resources outside of the base page are not prepending the /<org>/<repo>/ part to the URL, so they are all returning 404s.
My index.html file in docs/ contains the proper base href="/<org>/<repo>/" and the docs/ folder contains all needed images and font files in its assets/ subdirectory, so I'm not sure what gives. I have also copied index.html to 404.html.
Am I missing something? Or is it possible that this web application was not created correctly for GH Pages?
Thanks in advance :-)
Change the base href to index.html only and all will work from there
base href="index.html"
From there it will take the path properly
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
I have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.
I started working with App Engine today and I am trying to find a way to set a root folder for each of my modules/services. Example:
Folder Structure
/mod1/*
/mod2/*
dispatch.yaml
app.yaml
mod1.yaml
mod2.yaml
Is it possible to set the base directory for a module in App Engine yaml file?
Something similar to RewriteBase / in apache. This way in my mod1.yaml I dont have to specify the mod1 directory 30 time for each endpoints.
Maybe a commend in the dispactch.yaml
- url: "api-dot-lyreka-com.appspot.com/"
module: api
path: /mod1 -- Just for example. Something like that
I have been looking for a couple hours now.
Just move the module .yaml files inside the respective module dir which makes that module dir become the "root" of the module, so you don't need to specify it anymore. More details here:
Run Google App Engine application with microservice
New project structure for Google App Engine
Note: each module only sees what's inside its "root" dir, nothing above it is deployed when the module is deployed. But you can symlink stuff in each of the module dir to share it across modules: Sharing entities between App Engine modules
I moved my bower_components two levels up to get it out of my project, out of the way of source control because it's a build artifact, it's not my source code and it's not part of the build output (my build output concats all the vendor js into vendor.js, one file).
So I can build find and it creates my dist folder fine; I got that working.
But now when I try to serve in order to debug on my local machine, index.html correctly points to all the ../../artifacts/bower_components scripts and it can't find them when it runs in the web server. I guess because they are above the web root.
How can I get the web server to find them?
I moved my bower_components two levels up to get it out of my project, out of the way of source control because it's a build artifact
Moving bower_components one level up so as it is out of your app files is logical. But two levels up so that it is out of source control is not. This case is better handled by adding an exception to the ignore file .(git|svn|...)ignore
Anyway, depending on the server you use, you should be able to configure a route, so that the server serves also whats in the bower_components folder. Here is an example with browsersync:
server: {
baseDir: "app",
routes: {
"/bower_components": "bower_components"
}
}
The server serves what's inside app folder, and also maps the content of the bower_components folder to the route /bower_components.
Links in index.html look therefore like that:
<script src="bower_components/angular/..."></script>
...even though bower_components is at a different level from index.html.