Merge pull request #70 from go-spatial/url-prefix

added baseURI config option and functionality

Author: justenPalmer

README.md

@@ -25,13 +25,31 @@ Fresco may be used in the browser by visiting [https://fresco.gospatial.org/](ht
 
 ## Running from source
 
-Fresco is built on top of React. To run Freco from source use the following steps:
+Fresco is built on top of React. To run Fresco from source use the following steps:
 
 1. Download the latest version of [Node.js](https://nodejs.org/en/download/)
 2. Clone this repository to your computer
 3. Navigate to this repo on your computer
 4. Run `npm install`
 5. To startup, run `npm start` - Fresco should open in a browser window
+6. To build Fresco for deployment run `npm run build` - the deployment files will be inside the `/build` directoty
+
+## Hosting Fresco from a subdirectory
+
+Fresco is able to be hosted from a subdirectory of a domain (i.e. https://yourhost.com/fresco/). To enable this functionality, modify the `package.json` file
+
+
+```
+{
+  "name": "fresco-app",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "/fresco",
+...
+
+```
+
+Then use `npm run build` to build Fresco for deployment.
 
 ## Contributing
 

public/index.html

@@ -16,15 +16,18 @@ import './App.css';
 export default class App extends Component {
 
    render (){
-      Mconfig.load();
+      Mconfig.load(); // load config from localStorage
+
+      const basename = process.env.PUBLIC_URL? process.env.PUBLIC_URL: '';
+
       return (
          <Provider store={Store}>
-            <Router>
+            <Router basename={basename}>
                <Switch>
-                  <Route exact path="/" component={Phome}/>
                   <Route path="/config" component={Pconfig}/>
                   <Route path="/style/:id" render={(props) => <Pstyle {...props} />}/>
                   <Route path="/add" component={Phome}/>
+                  <Route path="/" component={Phome}/>
                </Switch>
             </Router>
          </Provider>

public/vendor/jquery-3.2.1/jquery.slim.min.js

@@ -26,7 +26,6 @@ export default {
 	save:function(){
 		return new Promise((resolve,reject)=>{
 			const config = this.get();
-			console.log('config save:',config);
 			LocalStorage.set(LOCALSTORAGE_KEY,config);
 			return resolve();
 		});

public/vendor/popper-1.12.29/popper.js

@@ -12,28 +12,20 @@ export default class Vnav extends React.Component {
 			styles:'/',
 			config:'/config'
 		}
-
-		/*
-							
-		*/
-
+		
 		return <nav className="navbar navbar-expand-lg navbar-light bg-light">
 			<div className="container-fluid">
 				<Link to={paths.home} className="navbar-brand">
-					<img src="/img/icon.png" width="30" height="30" className="d-inline-block align-top" alt=""/>
+					<img src={`${process.env.PUBLIC_URL}/img/icon.png`} width="30" height="30" className="d-inline-block align-top" alt=""/>
 				</Link>
-				<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-					<span className="navbar-toggler-icon"></span>
-				</button>
-				<div className="collapse navbar-collapse">
-					<ul className="navbar-nav">
-						<li className="nav-item">
-							<NavLink to={paths.config} className="nav-link" activeClassName="active">
-								config
-							</NavLink>
-						</li>
-					</ul>
-				</div>
+
+				<ul className="navbar-nav">
+					<li className="nav-item">
+						<NavLink to={paths.config} className="nav-link" activeClassName="active">
+							config
+						</NavLink>
+					</li>
+				</ul>
 			</div>
 		</nav>