Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support bootstrap glyiphicons without hardcoding public path #207

Merged
merged 2 commits into from
Jul 21, 2016
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/bootstrap-public-path.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/**
* Created by welchk on 7/20/16.
*/
__webpack_public_path__ = window.location.protocol + "//" + window.location.host + "/";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is this variable used?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is dynamically sets the public path at runtime allowing proper resolving for loaders.

Found it in the issue for relative paths in style-loader.
Further explaination: webpack-contrib/style-loader#96 (comment)

Honestly, I am not a fan of this outside of the fact that it does work. This will allow proper support icon support to fix #125, but it also does so in a way that does not cause other breaking changes as seen in #181 & #205.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see that webpack_public_path is a magic global.

I'd suggest renaming bootstrap-public-path to webpack-public-path and adding a comment inside that explains why its being set dynamically and includes a link to relevant issues and the docs that explain what webpack_public_path is.

Thanks so much for all your hard work on this Kyle! 💯

2 changes: 1 addition & 1 deletion src/components/NotFoundPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const NotFoundPage = () => {
return (
<div>
<h4>
404 Page Not Found
404 Page Not Found <span className="glyphicon glyphicon-alert"></span>
</h4>
<Link to="/"> Go back to homepage </Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/* eslint-disable import/default */

import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import configureStore from './store/configureStore';
require('./favicon.ico'); // Tell webpack to load favicon.ico
import 'bootstrap/dist/css/bootstrap.css';
import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.
import { syncHistoryWithStore } from 'react-router-redux';

Expand Down
2 changes: 1 addition & 1 deletion webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ export default {
devtool: 'cheap-module-eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'./src/bootstrap-public-path',
'webpack-hot-middleware/client?reload=true',
'./src/index'
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: `${__dirname}/src`, // Note: Physical files are only output by the production build task `npm run build`.
publicPath: 'http://localhost:3000/', // Use absolute paths to avoid the way that URLs are resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
filename: 'bundle.js'
},
plugins: [
Expand Down