• Members 8 posts
    Aug. 17, 2020, 9:07 p.m.

    What's the "proper" way to start adding code to the frontend?

    What I have tried:
    1. cd frontend
    2. npm i
    3. npm i --save-dev eslint-config-react-app eslint-plugin-import eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react object.fromentries array.prototype.flatmap string.prototype.matchall internal-slot eslint-plugin-react-hooks (I had to install all these, so that I won't get "module not found" errors on running gulp watch)
    4. gulp watch

    After all these steps, gulp yells hundreds of warnings and errors at me.

    I noticed there is a package.json file on the root directory of the project, so there may be something wrong with my practice.
    Also, as docker mounts all files in the project to the container, will the huge node_modules folder slow things down?

    Does anyone have any ideas? Thanks!

  • Members 10 posts
    Aug. 18, 2020, 12:21 a.m.

    I was wondering the same thing, but I don't think it slow things down.
    If I understand correctly, the project folder is simply been shared between the container & the host. Let's assume that the container is serving a static file named mystyle.js. And we make some changes to mystyle.js in the host. The next time the container serve this file, mystyle.js will have those changes, because the same file is been shared.

    Well, that's how I understand it, someone correct me if I'm wrong.

    Edit : That only happens in development of Misago. For production it would not be done this way. For example, misago_docker has a completely different approach.

  • Members 8 posts
    Aug. 18, 2020, 2:46 p.m.

    Very true!

    However, it's not my major concern that node_module is huge. The more important thing is how to make custom changes to the frontend project, 'cus gulp.js thinks I'm totally fucked up, bro. Did you managed to do it?

  • Aug. 18, 2020, 6:13 p.m.

    Posting errors from gulp.js would help.

    I am aware it throws a lot of warnings, but what about errors?

  • Members 8 posts
    Aug. 18, 2020, 7:01 p.m.

    Something like this:

    [00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\options\root.js: Unexpected token (17:6)
      15 |   render() {
      16 |     return (
    > 17 |       <div className="page page-options">
         |       ^
      18 |         <div className="page-header-bg">
      19 |           <div className="page-header">
      20 |             <div className="container"> while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\options\root.js   
    [00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\users\root.js: Unexpected token (13:6)
      11 |   render() {
      12 |     return (
    > 13 |       <div className="page page-users-lists">
         |       ^
      14 |         <div className="page-header-bg">
      15 |           <div className="page-header">
      16 |             <div className="container"> while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\users\root.js     
    [00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\user-menu\root.js: Unexpected token (8:13)
       6 |   render() {
       7 |     if (this.props.isAuthenticated) {
    >  8 |       return <UserNav user={this.props.user} />
         |              ^
       9 |     } else {
      10 |       return <GuestNav />
      11 |     } while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\user-menu\root.js
    [00:59:14] SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (2:0) while parsing C:\Users\MyUserName\Desktop\Misago\frontend\src\services\zxcvbn.js while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\services\zxcvbn.js
    [00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\categories\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (35:10):
      33 |   }
      34 | 
    > 35 |   update = data => {
         |          ^
      36 |     this.setState({
      37 |       categories: data.map(hydrate)
      38 |     })
    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.     
    If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing. while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\categories\index.js
    [00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\social-auth\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (18:30):
      16 |   }
      17 |
    > 18 |   handleRegistrationComplete = ({ activation, email, step, username }) => {
         |                              ^
      19 |     this.setState({ activation, email, step, username })
      20 |   }
      21 |
    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.     
    If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing. while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\social-auth\index.js
  • Aug. 18, 2020, 9:10 p.m.

    It seems to conplain about JSX in files with js extension. This works on my setup and I don’t see why it shouldnt for you.

    I am currently AFK on vacations so I am unable to offer any more help here, sorry.

    BTW. there’s dockerignore file that teels docker to exclude node_modules.

  • Aug. 18, 2020, 9:11 p.m.

    Perhaps changing file extensions to JSX would fix the issue you are having?

  • Members 10 posts
    Aug. 19, 2020, 1:48 a.m.

    I'm not sure about the errors. I use the same gulp.js installed by npm in the frontend directory. (Misago/frontend/node_modules/gulp/bin/gulp.js). Just to make sure is the same version. I believe had to install a few packages, but it was my fault for not running npm on both folders containing a package.json file.

    Another thing, are you thinking to use misago_docker for production ?