There is a ready-made project. Backend on Yii2, the frontend is written in it. Please tell me how to add a piece of the front on ReactJS to the finished page, so that, for example, in OpenServer, when you launch the site(my project), ReactJS is displayed correctly (without using npm in the console).
In other words, how to connect ReactJS to a project?
You can make a build out of it using npm run build
and then from it you can link index.html
Add React in One Minute
In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
There will be no complicated tools or install requirements — to complete this section, you only need an internet connection, and a minute of your time.
Step 1: Add a DOM Container to the HTML
First, open the HTML page you want to edit. Add an empty tag to mark the spot where you want to display something with React. For example:
<!-- ... existing HTML ... -->
<div id="like_button_container"></div>
<!-- ... existing HTML ... -->
Step 2: Add the Script Tags
Next, add three tags to the HTML page right before the closing tag:
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
enter link description here
Related
I am new to Angular. I am working on a web application using Angular. When I start the project app.component.(ts, html...) and app.module.ts generated.
I am wondering when will the app.component.html will be rendered?
What should I put in app.component.html,
And when should I create an another component, like homepage component?
Will there be any differences between putting homepage in app.component.html and putting homepage in another component.html?
Welcome to Angular
So how bootstrap process works in Angular Application.
The entry point to every Angular Application is the main.ts file which contains this last line.
The platformBrowserDynamic() part of this line of code indicates that we are about to boot Angular in a browser environment.
The bootstrapModule() function bootstrap our root module which is app.module.ts.
AppModule(app.module.ts) is an entry module and also root module for our application.
app.component.ts is an entry component that we specify in app.module.ts.
So what should you keep in app.component.ts
You can consider app.component.ts as a HomeComponent also, but it is good to keep HomeComponent seprately and giving it's reference to app.component.ts.
You should create separate component for each separate page in your application.
Image source: medium.com
app.component.html is root component file. so its content display top. you create another component its will be render with root component. you can implement app routing module and define here application list of url for file. other word app.component.html is master page. and create new component is child page.
<html>
<head>
</head>
<body>
<!-- Content >> -->
<router-outlet></router-outlet>
<!-- Content << -->
/<body>
</html>
app.component.html is the page that will be rendered from your application. All the component's html pages created will be rendered with in app.component.html.
component's html pages will be rendered based on the routes set in app.module.ts.
for eg: if the route for 'home' is set as homeComponent then home.component.html will be rendered inside app.component.html.
To serve this purpose of dynamically loading the required components the app.component.html will have its content as nothing but output of routing module as,
<router-outlet></router-outlet>
reading further through the angular guide will help in understanding these concepts in depth. https://angular.io/
I was wondering if its possible to call a localhost url hosted on a flask app from another flask app (also running on localhost but on a different port). I currently have a simple flask app that shows a single image inside its html. The code is the following:
<head>
</head>
<body>
<img src="{{url_for('static', filename='image1.png')}}" alt="Image 1" height="100" width="100" />
</body>
</html>
I run it on localhost:5001 and it runs absolutely fine. That is I see a single image inside the browser.
Once I get this running within a browser, I open a second app that references this url in the form:
<img src="http://localhost:5001/"/>
inside index.html. This app is then run on localhost:5000
However, the image inside the second app doesn't show, even though I can see the domain for the image running just fine when I load localhost:5001 inside the browser. I understand I could do this simply within one app if I just wanted to show the image (by having the image resources inside one app), but I need to do something like this to test the certificates for separate domains, each one hosting a different image.
I was wondering is something like this possible. If so, what would be the best way to approach it, and if the way I am doing is not correct?
Thanks!
<img src="http://localhost:5001/"/>
The above is invalid, because you're loading the root of that page which returns the HTML.
You ought to reference it as something like:
<img src='http://localhost:5001/static/image1.png' />
If this doesn't work then load up the working image again, and right click to view in a new tab, noting the correct URL and substitute it here.
I'm trying to customize the page UI on Azure AD B2C unified sign in/sign up page.
I was able to create my template and upload all the assets i.e. html page, images and css to my Azure Blob Storage container with the right CORS settings.
When I pull up the page, however, it looks absolutely HORRIBLE! It doesn't seem to support Bootstrap. I read somewhere that no JavaScript is allowed. Is that the reason for this?
Once I upload my custom HTML page, Azure AD B2C seems to be stripping off a lot of the design elements necessary for my customization such as id and style in my body tag -- see below:
<!-- Omitted for brevity -->
<body id="my-login-class" style="url: ('https://myazurestorage.blob.core.windows.net/my-container/my-bg-image.jpg')">
<div id="some-important-id" class="my-important-class">
<div class="col-xs-8">
<div>Some important message</div>
<div>
<div class="col-xs-4">
<div id="api">
</div>
</div>
</div>
</body>
When I inspect the page source once my custom page is rendered, I see that all my classes and Id's are removed along with Bootstrap references e.g. css and js.
Am I getting this right? No Bootstrap which means Azure AD B2C only supports customization of the most basic kind?
Your HTML template can include any external, head, or inline styles but it can't include scripts.
An example of a customized page can be found at the WoodGrove sign-up or sign-in page.
The HTML template for this customized page can be found in the WoodGrove GitHub repository.
This HTML template includes Bootstrap's Reboot styles as well as the WoodGrove's specific styles.
Azure AD B2C creates the head and body elements and then copies the child elements for each of these head and body elements from your HTML template to its HTML document.
Therefore, you shouldn't add attributes to the body element in your HTML template, because they aren't copied.
You can import the bootstrap references. Please see this document: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/portals/azure-ad-b2c
See also: https://github.com/Azure-Samples/active-directory-b2c-php-webapp-openidconnect
It looks horrible for a reason. No styling is applied to the page so that it can be fully customizable. You can reference Bootstrap for CSS; however, I have run in to issues when using bootstrap.js for modals since it appears the Azure B2C API uses bootstrap for modals...In my experience, it is best to rely on Vanilla JS and to leave off any references to third-party JS.
It is possible to use JavaScript if you are using your own custom policies. There are some limitations to JavaScript and the best approach is to try to accomplish anything using the policy first.
To enable JavaScript use the following as guide:
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<UserJourneyBehaviors>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
...
</RelyingParty>
When referencing external CSS/JS files, the URL must be absolute. This is true for the head section of HTML files as well as any references within JavaScript. Relative URL's can only be referenced within a CSS file.
Incorrect:
<link href="./css/assets.css" rel="stylesheet" type="text/css" />
Correct:
<link href="https://your-storage-account.blob.core.windows.net/your-container/css/assets.css" rel="stylesheet" type="text/css" />
I have do to some changes in Javascript files. i deployed in my server and reset IIS.
I tried to launch from IE , the latest modified file changes cannot appear. It reads old file.
If I have to clear the cache , it will work. without clear cache how to work with latest files.
Please give a guidance to resolve this issue.
Thanks.
//try to get the value for time now and to add it to the script file url as version id
<html>
<title>
<script src='http://example.com/js/main.js?ver=<%=DateTime.Now.Ticks%>'
type='text/javascript' ></script>
<title>
<body>
</body>
</html>
You should check cache control options in your IIS.
For flushing cache you can use some variables in js links.
For example:
http://domain.com/js/main.js
and
http://domain.com/js/main.js?ver=1
downloads same file, but second link downloads file like new resource
I am creating a node.js web application where I am using Yeoman angular scaffolding for client side.
I have an index.html which has all the javascript files included to load.
What i want to do is have a header file that will contain users name using model binding. These need to be included in all pages.
How can i achieve this?
You need to use ng-include directive to include partials.
Your index page would be structure something like
<body>
<div id='header' ng-include='/partials/header'/>
<div ng-view />
</body>