Add an html file to the build version of react - html

I have a landing file which is in pure HTML. (landing.html)
I want the main URL of the website to be this file and the rest of the URLs to go in the React app.
For example:
example.com -> landing.html
example.com/app -> react app
example.com/login -> react app
As I said, I want the main URL to read the landing.html.
But the rest of the app should read the build version of React.
If it's possible i want it to be a part of the React app and not adding it directly in build folder. After running build it should be automaticly in build folder so basicly kinda implicitly to be a part of react app.
One more thing I dont want to convert it to jsx. 😁
How can I implement this ?

For the landing page use
var __html = require('./template.html');
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});```
on / route and other react components use on app and login route

I researched a bit and found two solution for it.
First : Using multipage app feature in Vite.
Second: confining nginx on server for this feature. (I didn't do the configuration someone else did, but it worked)

Related

Change themes in ReactJS

so I am making a ReactJS app which requires me to change the theme and save it to localStorage so it can be used for something like https://www.youtube.com/watch?v=r_hYR53r61M. This guy has done it in JavaScript , I was hoping to do it in ReactJS. Please also suggest how to store it to localStorage.
Let's say your theme is dark. Then, just
const theme = "dark";
localStorage.setItem("theme",theme);
To get it,
const currentTheme = localStorage.getItem("theme");

How load html from renderer JS with ELECTRON

In develop phase the jquery load method to load html view work well with electron:
app.appContainer.load('html/homePage/homePage.html', () => { app.addListenerToHomePage(false) });
I have several html file for each page : home, user ...
I don’t want to open a new window .
Since I make a dist (with electron builder) it doesn't work att all : ERR_FILE_NOT_FOUND (it try to look to file:///C:/Users/lexa/AppData/Local/Programs/cleogs/resources/app.asar/html/homePage/homePage.html)
And I code everything with that load jquery method...
How could I make it work ?
The issue come from electron builder and my configuration probably.
I switch to forge electron and it work without change nothing . :D

Loading external html pages from a database in ionic1

I am current making a dynamic mobile application that loads some custom assets such as html and css from a database but am failing to get it to work. I have tried the sce in angularjs 1 but it still has issues with it. The first issue is it's not trusted if I use trustAsHtml and the second is a digest keeps running for long loading hundreds of errors if I use trustAsResourceUrl. Any suggestions on how I can accomplish my task will be appreciated.
My approach is as follows:
1. View
<div ng-include src="{{getHtml(vm.user.html.path)}}"></div>
2. Controller
function getHtml(url) {
if (url) {
var newPath = url.substr(1);
var asset = 'https://www.slywolf.org' + newPath;
return $sce.trustAsResourceUrl(asset);
}
}

Converting mark down content to HTML in a Django-React app

I want to store blog content in my database, which I could then display in an HTML page, ideally by sending the content over an AJAX call.
After looking through the web I've read a few people suggesting storing the blog post as markdown which makes the most sense since it contains supports headers, paragraphs and code formatting, and mark down would be the easiest way to read/write the post.
However I'm not sure how to convert the markdown to an HTML page. I'm also not sure if I want to do that conversion client side (React frontend) or server side (Django Rest Framework backend).
What are some tools or methods to get this done given my stack?
I've done something similar, but with Angular - there are plenty of projects out there to help accomplish this. React-Markdown is one of them.
From their GitHub:
var React = require('react');
var ReactDOM = require('react-dom');
var ReactMarkdown = require('react-markdown');
var input = '# This is a header\n\nAnd this is a paragraph';
ReactDOM.render(
<ReactMarkdown source={input} />,
document.getElementById('container')
);

Angular service returning and html file instead of a json file

I've been learning MEAN stack technologies for a week now. I'm having a problem using a custom service in Angular. I try to get a .json file, but when the app loads & I examine the loaded resources in the web inspector, the ison file is showing the code from my index.html file. Does anyone know why this is happening and how to fix it?
This is the custom service:
angular.module('StudentService', [])
.factory('Students', ['$http', function($http) {
return $http.get('app/students.json');
}]);
I don't understand how it could be loaded with the title 'students.json' but show up in the web inspector as html code. Any help would be greatly appreciated.
Change your code like this
$http.get('app/students.json')
.then(function(res){
$scope.todos = res.data;
});
return $scope.todos;