codemirror not copied to dist/static/js

[march1993]

When I use the build.sh in filebrowser project, codemirror is not copied to dist/static/js. Thus cause 404 when the browser trying to load the corresponding js.

[eine]

Do you mean lib/codemirror.js or the mode files (e.g. mode/txt/txt.js, or mode/markdown/markdown.js)?

[march1993]

I mean $GOPATH/src/github.com/filebrowser/filebrowser/node_modules/filebrowser-frontend/dist/static/js/codemirror/mode/markdown/markdown.js

[eine]

Then, I can reproduce the issue.

It's not a problem with codemirror itself or the build process. Everything works as expected. However, modes or styles need to be explicitly added which is not done right now. Because the list is so long (https://codemirror.net/mode/index.html), I find it sensible not include any, or to include just a few.

However, I think it'd be useful to explain it in the docs or in the README, and let the user know how they can rebuild the frontend to add modes.

[march1993]

Glad to hear that.

[eine]

@march1993 I just got it to work. Thought you might find it useful:

First, clone the backend and the frontend under the same dir:

mkdir filebrowser-hub
cd filebrowser-hub
git clone https://github.com/filebrowser/filebrowser
git clone https://github.com/filebrowser/frontend

Edit frontend/src/components/files/Editor.vue to add the language modes you want. E.g., here I added markdown and VHDL.

Then, save the following block as filebrowser-hub/build_assets_in_docker.sh:

echo 'http://dl-cdn.alpinelinux.org/alpine/edge/testing' >> /etc/apk/repositories
sed -i -e 's/v[0-9]\.[0-9]/edge/g' /etc/apk/repositories
apk add -U --no-cache yarn git

# Clean the dist folder and build the assets
cd /src/frontend
if [ -d "dist" ]; then
  rm -rf dist/*
fi;
yarn install
yarn build

cd /src/filebrowser

# Install rice tool if not present
if ! [ -x "$(command -v rice)" ]; then
  go get github.com/GeertJohan/go.rice/rice
fi

mkdir -p node_modules
mkdir -p node_modules/filebrowser-frontend
cp -vr /src/frontend/dist node_modules/filebrowser-frontend

# Embed the assets using rice
rice embed-go

Now, run build_assets_in_docker.sh inside a golang:alpine container:

docker pull golang:alpine
$(command -v winpty) docker run --rm -itv /$(pwd)://src -w //src golang:alpine sh -c "./build_assets_in_docker.sh"

Last, build the docker image:

cd filebrowser
docker build -t filebrowser/filebrowser .

And try it:

docker run -dp 5555:80 filebrowser/filebrowser --no-auth

Now you can create .md files without errors and with proper decoration. This does not apply to .vhd or .vhdl sources, yet, because filebrowser/filebrowser#314 and filebrowser/filebrowser#358.

[helloray]

@1138-4eb , I don't use docker. I used build_all.sh to build the project. I edit frontend/src/components/files/Editor.vue and added the language modes. The codemirror is not copied to dist/static/js as in this thread. After I changed below webpack code, the issue was gone

--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -73,7 +73,7 @@ module.exports = merge(baseWebpackConfig, {
ignore: ['.*']
},
{

•    from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
  

•    from: path.resolve(__dirname, '../node_modules/codemirror/mode/*/*'),
     to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js')
   }
  

  ])

--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -35,7 +35,7 @@ var webpackConfig = merge(baseWebpackConfig, {
ignore: ['.*']
},
{

•    from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
  

•    from: path.resolve(__dirname, '../node_modules/codemirror/mode/*/*'),
     to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js'),
     transform: function (source, path) {
       let result = UglifyJS.minify(source.toString('utf8'))
  

[eine]

@helloray, thanks for the hint! I am reopening this issue.

Certainly, I am not really sure about the convenience of keeping all the javascript scripts in subdir build.

Should/can we use vue-cli-service instead? Anyone experienced enough with both Vue.js and webpack can tell if we would loose anything by changing this?

[hacdias]

We will replace Codemirror with another editor. Closing this in favour of #46