search

rokoroku / react-mobx-typescript-boilerplate

A bare minimum frontend boilerplate with React 16.7, Typescript 3.2 and Webpack 4
384 stars 91 forks source link

Add more stuff to the boilerplate for static site conversion #22

Closed Emixam23 closed 3 years ago

Emixam23 commented 4 years ago

Hey!

First, I would like to thank you for your work, really amazing! It really helped me to move forward on ReactJs by using Typescript, but also Mobx was WAY EASIER to understand than redux, so thank you!

Today, I have to work on some side projects, however, these projects consist into translating static website (html, css/scss, js/jQuery) into ReactJs app.

Since your boilerplate does/answer severything I need, I, however, have issues. In order to fix these issues, I need to be able to create, in with /assets/ directory:

However, I can't find the way to integrate them to your index.html or main.tsx...

Could you help me a bit? I would love to share this with you so maybe we can upgrade both your Mobx/Redux Typescript-WebPack boilerplates?

Thanks

Emixam23 commented 4 years ago

First issue:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Frontend Boilerplate with React and TypeScript</title>

    <!-- I ADD THIS PART
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mukta:300,400,700">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/magnific-popup.css">
    <link rel="stylesheet" href="./css/jquery-ui.css">
    <link rel="stylesheet" href="./css/owl.carousel.min.css">
    <link rel="stylesheet" href="./css/owl.theme.default.min.css">
    <link rel="stylesheet" href="./css/aos.css">
    <link rel="stylesheet" href="./css/style.css">
    -->    

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

So I copied many css into my /assets/css/ directory.

I am getting this from webpack:

ERROR in Error: webpack-internal:///../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js:93 var style = document.createElement('style'); ^ ReferenceError: document is not defined

  • injectStylesIntoStyleTag.js:93 insertStyleElement [..]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js:93:15

  • injectStylesIntoStyleTag.js:208 addStyle [..]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js:208:13

  • injectStylesIntoStyleTag.js:81 modulesToDom [..]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js:81:18

  • injectStylesIntoStyleTag.js:239 module.exports [..]/[style-loader]/dist/runtime/injectStylesIntoStyleTag.js:239:25

  • bootstrap.min.css:15 eval webpack-internal:///./assets/css/bootstrap.min.css:15:14

  • index.html:232 Object../assets/css/bootstrap.min.css /Users/emixam23/Workspace/ecommerce-template-to-reactjs/src/assets/index.html:232:1

  • index.html:21 __webpack_require__ /Users/emixam23/Workspace/ecommerce-template-to-reactjs/src/assets/index.html:21:30

  • index.html:3 eval [..]/[html-webpack-plugin]/lib/loader.js!./assets/index.html:3:34

  • index.html:198 Object.../node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html /Users/emixam23/Workspace/ecommerce-template-to-reactjs/src/assets/index.html:198:1

  • index.html:21 __webpack_require__ /Users/emixam23/Workspace/ecommerce-template-to-reactjs/src/assets/index.html:21:30

ℹ ｢wdm｣: Failed to compile.

What I don't get (maybe because I am still new to webpack) is why, even if my files are found and correct, I get this kind of error from webpack when loading localhost:3000/

rokoroku commented 4 years ago

Sorry for late reply (and not replying you for the first question.)

Webpack is module bundler. If you want add local assets to the your distribution, you have to let webpack know which assets should be included. Since the basic html-plugin doesn't copy and bundle your local assets, I'd recommend you to use webpack plugins which help this scenario.

  1. copy-webpack-plugin: it copies your local assets to webpack output folder.
  2. html-webpack-tags-plugin: it dynamically appends your "copied" assets into the output html file. (this is so called html-webpack-include-assets-plugin)
Emixam23 commented 4 years ago

Hey!

It's ok, don't worry. When you speak about copying the local assets to output, you mean production distribution, but what about dev?

I found a workaround were I include the css/scss from main, so the whole app tree can access the style, but I am not sure if it's the most optimized approach

I will keep digging into it and let you know :) I will look at your point 1. and 2. and get back to you

Thanks!