create-react-app custom build to subfolder

Add a key "homepage": "your-subfolder/"  in your package.json 
All static files will be loaded from "your-subfolder"

If there is no subfolder and you need to load from same folder you need to add the path as "./"

"homepage": "./",

Link Bootstrap to your React JS application.

Once you have already installed the Bootstrap using npm command do the below to include the Bootstrap in your React app


index.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

App.js (to test)

<button type="button" className="btn btn-primary">Primary</button>

The entire App.js will something like this

import React, { Component } from 'react'; 

class App extends Component { 

 render() { 
 return ( 
 <div> 
 <button type="button" className="btn btn-primary">Primary</button> 
 </div> );
 } 
} 
export default App;

Install old version of Bootstrap using npm

Go to your project folder and execute the below command 

npm install bootstrap@3.3.5 --save

This will install the bootstrap version 3.3.5 and save the entry in your package.json

Angular find the version of CLI

Find version of the Angular CLI using the command

ng --version 

or

ng -v

C:\Users\xxx>ng -v


This will show the version

C:\Users\xxxx>ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.1
Node: 9.11.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.1
@angular-devkit/core         0.7.1
@angular-devkit/schematics   0.7.1
@schematics/angular          0.7.1
@schematics/update           0.7.1
rxjs                         6.2.2

typescript                   2.7.2

Angular - deploy your app in a sub folder

 

If you want to deploy your app in a sub folder you need to add the build flag --base-href

This will set the <base href> in the html.

eg: ng build --prod --base-href=/dist/my-app/

Example

C:\Users\xxxx\Documents\works\ng\my-app>ng build --prod --base-href=/dist/my-app/

Date: 2018-08-01T09:13:50.591Z

Hash: 54082fcc1c77e8124a32

Time: 56271ms

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]

chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]

chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]

chunk {3} main.ca74553da7e3e55d6410.js (main) 171 kB [initial] [rendered]