We Keep Coding

Create React App Blank Page when including on existing site

I'm using XAMPP locally to host an exisiting CMS and I want to include my react app within the CMS by using an include (this works fine for including static HTML and other PHP pages). The CMS admin page it'll be included on will look like this: http://localhost/website/administrator/
I need to place my create-react-app in a folder like this though so that the built in CMS script will include it: website\subfolder1\subfolder2\subfolder3\subfolder4\default
Currently I'm getting a blank page where I've tried to include my app. If I remove the embedded I can see the markup is being output, as in an empty div with the root class name.
I've tried setting a "homepage" property in my package.json and various combinations such as '.', and also edited the manifest site_start without luck, i can't seem to get it to render. Can anyone point me in the right direction?

Here are some steps that you could try to get the bundles building correctly, as you will need to override the default behaviour of create-react-app by ejecting.
Make a backup copy of your create-react-app
Eject, so that you will now be able to configure webpack
n
npm run eject
Go to webpack config, see the scripts section
You can change the build scripts as such as start and build
The issue seems to be where the js and css files are built to. You can change where they are output in webpack by editing the config.
See link: https://webpack.js.org/configuration
You could try changing the path for the output section to where your cms html is trying to find the bundle.

Linking Path Causes Javascript Function Fails with Brackets's Live Preview

I created a project with an index.html file in my root folder with Brackets. Because there are common js/css files significantly I wanted to create projects under this root to be able to reach these common files from my current root. So I gave ../../ before my all paths for each of the links and scripts for my subfolder's index.html like below,
<script src="../../js/main.js" type="text/javascript"></script>
But soon I realized it made my javascript functions fail even if it's obviously working otherwise. I couldn't figure out why and I'll appreciate any idea about it.

After #Jonas Giuro's answer I tried it with node's http-server instead of live preview of brackets and it doesn't fail. The issue #6714 is probably the main cause to not being able to access behind its root directory. There is mainly two alternatively same methods I could think of;
For brackets users, simply starting live preview (with command + alt + P) at the top root folder and then switching in the subfolders (any html or anything) works flawless.
And for the ones using http-server via terminal with npm are able to host the top root folder again to be able to serve the subfolders as wishes.

How do you publish a typescript website to GitHub Pages using Visual Studio?

So I made a Typescript project with Visual Studio. It works fine when I launch it with Visual Studio, but if I try to push it to my GitHub Pages site, it will put the index.html in a subfolder and I get a 404 error when I try to load my website. Even if I try to reference the index.html in the website url it doesn't really work.
I was wondering if it's possible to only publish the needed items. I think I would only need the subfolder. Correct me if I am wrong though.
Note: I have the GitHub extension for Visual Studio installed.
UPDATE:
Since some of the links don't seem to work anymore I think I should give some extra information. So basically you need to have a branch named gh-pages. On that branch you need to have an index.html file in your root folder. Then the index.html file should be visible on the github page URL.

You need to push a branch named gh-pages in order to view it as a website.
Create a new branch and then move the file into the root folder of the branch, upload it to the gh-pages and you set to go.
Check this out:
https://github.com/nirgeier/JimVliet.github.io/tree/gh-pages
This is how your file should be inside your root folder.

Can't get gh-pages to work with Angular project

I am working on an Angular project and wanted to host the project through GitHub with gh-pages.
Since the index.html file was not in the root directory, I created an empty branch off of my master and called it gh-pages. I then copied my files into the new branch, so that the index.html file was in the root directory.
I am also using Grunt, so I copied the grunt generated app.js file into the root directory as well. I can now see the project in the browser if I go to http://kelseysteele.github.io/votm3/#/home, however the navigation bar is missing and the other pages, like http://kelseysteele.github.io/votm3/#/overview, are not working properly.
I've been stuck on this for a few days and would really appreciate any assistance with this.

Check your console, you'll see errors: GET http://kelseysteele.github.io/data/overview-data.json 404 (Not Found)
Fix the url here: https://github.com/KelseySteele/votm3/blob/master/src/votm3/Scripts/controllers/overview-controller.js#L10

Because you are using grunt, you will want to build the project before serving the files. This will make the files and code modules build properly before serving the index.html. A popular module you can use is https://github.com/tschaub/grunt-gh-pages an get your builds serving properly.

Deployment Strategy for Require JS Optimized/Concatenated Website Files

My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?

Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.