search

jaredLunde / webpack2-react-sass-env-boilerplate

A boilerplate for creating Javascript packages with Webpack 3*, babel-preset-env, React + HMR, and SASS.
MIT License
4 stars 2 forks source link

Dist folder index? #2

Closed Anima-t3d closed 7 years ago

Anima-t3d commented 7 years ago

When running the npm run build or npm run build:dist command I don't see a usable index.html file in the dist folder?

For now I copied the index.html file from the root:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>your-app</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="your-app"></div>

    <script src="/assets/modernizr.js" type="text/javascript"></script>
    <script src="/assets/vendor.dev.js" type="text/javascript"></script>
    <script src="/assets/your-app.dev.js" type="text/javascript"></script>
</body>
</html>

And changed it to:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>your-app</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="your-app.css">
</head>
<body>
    <div id="your-app"></div>

    <script src="vendor.js" type="text/javascript"></script>
    <script src="your-app.js" type="text/javascript"></script>
</body>
</html>

For it to be production ready the tool needs to be changed so it can do:

However npm run start works well for development.

I also noticed that when trying to add packages I got cross-env error. I added it, then I had a babel error, so I installed babel-cli. After that I could add the package I wanted to originally add. However each install it will run the npm build command. Or am I doing something wrong?

jaredLunde commented 7 years ago

I have to think about this more. I'm not sure I agree on either point for a few reasons.

Have valid HTML start point

Put JS and CSS in proper folders

All that said, I think after weighing the pros and cons here... including html-webpack-plugin out-of-the-box makes the most sense in terms of package-completeness.

I've updated the package with these considerations and bumped the version to reflect potential breaking changes. I also updated the create-app script to include a search for .ejs files when replacing {{PKG_NAME}}.

jaredLunde commented 7 years ago

I also noticed that when trying to add packages I got cross-env error. I added it, then I had a babel error, so I installed babel-cli. After that I could add the package I wanted to originally add. However each install it will run the npm build command. Or am I doing something wrong?

What do you mean when you say 'try to add packages'? babel-cli is included in the package dependencies, as is cross-env.

Installing your app runs npm build because npm build is included in the prepublish script. To disable that, just remove that script from package.json. There are very good reasons to automatically build before publishing as a default behavior.

jaredLunde commented 7 years ago

Thanks for staying engaged by the way. Valuable feedback.

Anima-t3d commented 7 years ago

Have valid HTML start point

It's just that right now you cannot run build and have a ready to deploy (be it in minimal form) folder.

Put JS and CSS in proper folders

This is more a nice to have than really needed. For the minimal form, I see no issue with having no folders for assets. Later on you could still split it into folders and update the .html file to point to the right paths.

Questions

What do you mean when you say 'try to add packages'? babel-cli is included in the package dependencies, as is cross-env.

For example I wanted to add react-router-dom to my app which has a dependency on your boilerplate. For some reason I could not add new packages until I resolved cross-env and babel-cli. Perhaps something went wrong, but I thought to bring it up.

Installing your app runs npm build because npm build is included in the prepublish script. To disable that, just remove that script from package.json. There are very good reasons to automatically build before publishing as a default behavior.

Ok, thanks.

jaredLunde commented 7 years ago

I agree with you on both points for consistency and usability concerns. The update is live here and on npm. You will have to make some small but annoying changes to your configs on any current applications to use the solution I arrived at:

  1. npm install --save-dev html-webpack-plugin
  2. Write the embedded JS template for html-webpack-plugin https://github.com/jaredlunde/webpack2-react-sass-env-boilerplate/blob/master/index.ejs
  3. Add html-webpack-plugin to webpack.config.js https://github.com/jaredlunde/webpack2-react-sass-env-boilerplate/blob/master/webpack.config.js#L132-L136
  4. Add assets/ to output paths in webpack.config.js

And if you used the create-app-like executable:

Replace

find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i.bak -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;

With

find . -type f \( -name "*.html" -o -name "*.js" -o -name "*.ejs" -o -name "*.json" \) -and -not -path "*/node_modules/*" -exec sed -i.bak -e "s/{{PKG_NAME}}/${PKG_NAME}/g" {} \;;
jaredLunde commented 7 years ago

Oh, also I couldn't replicate the issue you're having w/ cross-env and babel-cli unfortunately. I installed react-router and react-router-dom on a fresh app (on macOS) w/o issue :.

Anima-t3d commented 7 years ago

Oh, also I couldn't replicate the issue you're having w/ cross-env and babel-cli unfortunately. I installed react-router and react-router-dom on a fresh app (on macOS) w/o issue :.

I think it must have been some edge case. Most likely something along the lines of the server running and at the same time trying to add a package perhaps...

I integrated your changes and it works well. Thanks.