Unable to set up local development environment

kubajal commented 4 years ago

Hi, I was trying to create a local development environment on my Windows 10 following the steps here and I ran into issues with grunt. The steps I did was:

download and install yarn from the yarn website (yarn v.1.22.4),
install grunt through npm (npm install -g grunt-cli, which downloaded grunt-cli v1.3.2 & grunt v1.0.4),
git clone https://github.com/formtools/core.git
cd into the root folder of the project,

run yarn install, my output was:

C:\wamp64-v3.2.0\www\core>yarn install
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > react-codemirror@1.0.0" has incorrect peer dependency "react@>=15.5 <16".
warning " > react-codemirror@1.0.0" has incorrect peer dependency "react-dom@>=15.5 <16".
[4/4] Building fresh packages...

run grunt (which failed). The following error occured:

This happens both with cmd.exe (Windows-style paths) and git bash (Unix-style paths).

Expected behaviour: it should create the dist/ folder.

kubajal commented 4 years ago

OK, after some debugging I found out that it was caused by active_api equal to null which was caused by missing local.dev.js in the root directory. I think it's misleading that information about local.dev.js comes after actual commands in the documentation and without adding this file grunt fails.

After adding local.dev.js the new error I get when I run grunt is:

C:\wamp64-v3.2.0\www\core>grunt
[...]
Running "sync:modules" (sync) task

Running "sync:themes" (sync) task

Running "sync:api" (sync) task

Running "sasslint:target" (sasslint) task

Running "sass:dist" (sass) task

Running "concurrent:watchers" (concurrent) task
    Running "run:webpack_dev" (run) task
    Running "watch" task
    Waiting...
    >> Error: spawn yarn ENOENT
    Warning: non-zero exit code -4058 Use --force to continue.

    Aborted due to warnings.
Warning:  Use --force to continue.

Aborted due to warnings.

Grunt fails on executing yarn dev which is apparently the last command in grunfile.js. When I execute it manually I get:

C:\wamp64-v3.2.0\www\core>yarn dev
yarn run v1.22.4
$ webpack --config webpack.config.js --env development

webpack is watching the files…

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
Hash: c958d99863f858df53e9
Version: webpack 4.39.3
Child
    Hash: c958d99863f858df53e9
    Time: 15217ms
    Built at: 2020-04-12 14:23:52
                 Asset      Size  Chunks             Chunk Names
        main.bundle.js  13.8 MiB    main  [emitted]  main
    main.bundle.js.map  8.31 MiB    main  [emitted]  main
              main.css  13.5 KiB    main  [emitted]  main
          main.css.map  18.3 KiB    main  [emitted]  main
    Entrypoint main = main.css main.bundle.js main.css.map main.bundle.js.map      
    [0] multi ./src/react/installation-bundle.js 28 bytes {main} [built]
    [./src/react/constants.js] 109 bytes {main} [built]
    [./src/react/installation-bundle.js] 2.92 KiB {main} [built]
    [./src/react/installation/Layout/Layout.component.js] 3.03 KiB {main} [built]  
    [./src/react/installation/Layout/Layout.container.js] 1010 bytes {main} [built]
    [./src/react/installation/index.js] 392 bytes {main} [built]
    [./src/react/installation/pages/Step1.container.js] 842 bytes {main} [built]
    [./src/react/installation/pages/Step2.container.js] 1.42 KiB {main} [built]
    [./src/react/installation/pages/Step3.container.js] 1.3 KiB {main} [built]
    [./src/react/installation/pages/Step4.container.js] 957 bytes {main} [built]
    [./src/react/installation/pages/Step5.container.js] 538 bytes {main} [built]
    [./src/react/installation/pages/Step6.container.js] 741 bytes {main} [built]
    [./src/react/store/index.js] 1.46 KiB {main} [built]
    [./src/react/store/init/index.js] 145 bytes {main} [built]
    [./src/react/utils/index.js] 302 bytes {main} [built]
        + 5761 hidden modules

    WARNING in ./src/react/store/components/index.js 4:0-39
    "export 'default' (reexported as 'reducer') was not found in './reducers'
     @ ./src/react/installation/store/installation.actions.js
     @ ./src/react/installation/store/index.js
     @ ./src/react/installation/Layout/Layout.container.js
     @ ./src/react/installation-bundle.js
     @ multi ./src/react/installation-bundle.js
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/ComponentList/ComponentList.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/ComponentTypeBadge/Badge.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/Dialogs/ComponentDialog.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/EditableComponentList/EditableComponentList.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/Header/Header.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/LoadingOverlay/LoadingOverlay.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/NotificationPanel/NotificationPanel.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/components/Pills/Pills.scss:
        Entrypoint mini-css-extract-plugin = *
           2 modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/installation/Footer/Footer.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/react/installation/Footer/Footer.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/resolve-url-loader??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/react/installation/Footer/Footer.scss 2.19 KiB {mini-css-extract-plugin} [built]
            + 1 hidden module
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/installation/InstallationComponents/Changelog.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/react/installation/InstallationComponents/Changelog.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/resolve-url-loader??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/react/installation/InstallationComponents/Changelog.scss 2.36 KiB {mini-css-extract-plugin} [built]
            + 1 hidden module
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/installation/InstallationComponents/InstallationComponents.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/react/installation/InstallationComponents/InstallationComponents.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/resolve-url-loader??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/react/installation/InstallationComponents/InstallationComponents.scss 3.09 KiB {mini-css-extract-plugin} [built]
            + 1 hidden module
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/installation/InstallationComponents/VersionBadge.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/react/installation/InstallationComponents/VersionBadge.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/resolve-url-loader??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/react/installation/InstallationComponents/VersionBadge.scss 796 bytes {mini-css-extract-plugin} [built]
            + 1 hidden module
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/installation/Layout/Layout.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/react/installation/Layout/Layout.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/resolve-url-loader??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/react/installation/Layout/Layout.scss 11.7 KiB {mini-css-extract-plugin} [built]
            + 1 hidden module
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--5-1!node_modules/resolve-url-loader/index.js??ref--5-2!node_modules/sass-loader/dist/cjs.js??ref--5-3!src/react/installation/Navigation/Navigation.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/react/installation/Navigation/Navigation.scss] ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/resolve-url-loader??ref--5-2!./node_modules/sass-loader/dist/cjs.js??ref--5-3!./src/react/installation/Navigation/Navigation.scss 3.14 KiB {mini-css-extract-plugin} [built]
            + 1 hidden module

Now I want to install the development version (run the installation script). But when I open http://localhost/core/dist in the browser nothing happens. I also tried http://localhost/core/src and http://localhost/core with no success.

kubajal commented 4 years ago

It turned out I forgot to switch Apache on again after some tests that I made trying to make it running... A silly mistake. When I open /localhost/core/dist I am finally able to install Formtools.

Unfortunately there is a new error on step 4 when creating config.php:

Here is the full error:

xhr.js:172 GET http://localhost:8888/formtools-site/cdn.formtools.org/feeds/core/core-3.0.20.json net::ERR_CONNECTION_REFUSED
dispatchXhrRequest @ xhr.js:172
xhrAdapter @ xhr.js:11
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:53
Axios.(anonymous function) @ Axios.js:68
wrap @ bind.js:9
(anonymous) @ actions.js:30
(anonymous) @ index.js:8
dispatch @ redux.js:636
(anonymous) @ installation.actions.js:147
(anonymous) @ index.js:8
dispatch @ redux.js:636
(anonymous) @ installation.actions.js:164
Promise.then (async)
(anonymous) @ installation.actions.js:162
(anonymous) @ index.js:8
createConfigFile @ Step4.container.js:13
createFile @ Step4.component.js:26
callCallback @ react-dom.development.js:347
invokeGuardedCallbackDev @ react-dom.development.js:397
invokeGuardedCallback @ react-dom.development.js:454
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:468
executeDispatch @ react-dom.development.js:600
executeDispatchesInOrder @ react-dom.development.js:622
executeDispatchesAndRelease @ react-dom.development.js:725
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:733
forEachAccumulated @ react-dom.development.js:707
runEventsInBatch @ react-dom.development.js:750
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5901
batchedEventUpdates @ react-dom.development.js:2344
dispatchEventForPluginEventSystem @ react-dom.development.js:5996
dispatchEvent @ react-dom.development.js:6025
unstable_runWithPriority @ scheduler.development.js:643
runWithPriority$2 @ react-dom.development.js:11305
discreteUpdates$1 @ react-dom.development.js:21672
discreteUpdates @ react-dom.development.js:2359
dispatchDiscreteEvent @ react-dom.development.js:5979

When I open localhost/core/dist I get the login screen. Because of the above error the admin account is not created (I could not execute any following steps such as Admin account creation). I can do it manually though by setting username & password columns (using double MD5 encription) for the only existing row in the accounts table.

I also could install Form Builder. But I was not able to create any form: Hitting "Add Form" gives the error below:

Apparently my Formtools are broken.

kubajal commented 4 years ago

Well, obviously the above error is an issue with CORS. I enabled a proxy endpoint on my Apache server so CORS requests to cdn.formtools.org are now enabled and installlation JS can access http://cdn.formtools.org/feeds/core/3.0.20.json through localhost/formtools-site/... Now when I run the installation it gets frozen on Step 4 (Crete config file). When I hit refresh I can go to the next step (Component List) but its empty.

I started to compare what other branches have and found out that branch 3.0.20 works. So when I check it out and then run yarn install/grunt/yarn dev (yarn dev manually because grunt fails on this step) I can finally install Formtools. Apparently the installation script from master branch does not work yet. I'm writing this all just in case anybody wonders.

formtools / core

Unable to set up local development environment #690