How can I preview frontend changes in real-time?

[yua5]

Hello! I'm currently trying to do some localization work using i18n, but I'm facing an issue: I'm not sure how to preview changes to the frontend code in real-time. I've attempted to run the npm run start command individually in the src/frontend directory, but it doesn't seem to work. I suspect it might be due to the backend not being started.

Currently, I have to package with mvn package after each modification, then deploy the files into Tomcat 9 to see the changes, but this process is too slow. Is there a way to preview frontend changes in real-time? I would greatly appreciate your help!

[KCMertens]

Yeah you can do this, you'll need to override the jsPath setting in the corpus-frontend.properties file. Here's how to create that: https://github.com/INL/corpus-frontend?tab=readme-ov-file#backend-configuration

The correct url for the webpack-dev-server is http://localhost:8081/dist (note no end slash).

Java changes will need a recompile though, or you'd have to deploy in tomcat inside an IDE like eclipse or intellij though.

[yua5]

Thanks a lot! Now This is mycorpus-frontend.properties file:

# The url under which the back-end can reach blacklab-server.
# Separate from the front-end to allow connections for proxy situations
#  where the paths or ports may differ internally and externally.
blsUrl=http://localhost:8085/blacklab-server/

# The url under which the client can reach blacklab-server.
blsUrlExternal=/blacklab-server/

# The url under which the client can reach the corpus-frontend.
# May be needed if the corpus-frontend is proxied under a different path.
# It defaults to the contextPath of the servlet, so it might not strictly be 'corpus-frontend', depending on your deployment.
cfUrlExternal=/corpus-frontend/

# Optional directory where you can place files to further configure and customize
#  the interface on a per-corpus basis.
# Files should be placed in a directory with the name of your corpus, e.g. files
#  for a corpus 'MyCorpus' should be placed under 'corporaInterfaceDataDir/MyCorpus/'.
# corporaInterfaceDataDir=/corpus-frontend/data/projectconfigs

# Optional directory for default/fallback settings across all your corpora.
# The name of a directory directly under the corpusInterfaceDataDir.
# Files such as the help and about page will be loaded from here
#  if they are not configured/available for a corpus.
# If this directory does not exist or is not configured,
#  we'll use internal fallback files for all essential data.
corporaInterfaceDefault=default

# Path to frontend javascript files (can be configured to aid development, e.g.
#  loading from an external server so the java web server does not need
#  to constantly reload, and hot-reloading/refreshing of javascript can be used).
jspath=http://localhost:8081/dist

# An optional banner message that shows above the navbar.
#  It can be hidden by the user by clicking an embedded button, and stores a cookie to keep it hidden for a week.
#  A new banner message will require the user to explicitly hide it again.
# Simply remove this property to disable the banner.
bannerMessage=<span class="fa fa-exclamation-triangle"></span> Configure this however you see fit, HTML is allowed here!

# Disable xslt and search.xml caching, useful during development.
cache=true

# Show or hide the debug info checkbox in the settings menu on the search page.
# N.B. The debug checkbox will always be visible when using webpack-dev-server during development.
# It can also be toggled by calling `debug.show()` and `debug.hide()` in the browser console.
debugInfo=false

# Set the "withCredentials" option for all ajax requests made from the client to the (blacklab/frontend)-server. 
# Passes authentication cookies to blacklab-server.
# This may be required if your server is configured to use authentication.
# NOTE: this only works if the frontend and backend are hosted on the same domain, or when the server does not pass "*" for the Access-Control-Allow-Origin header. 
withCredentials=false

And my blacklab-server is working. But when I want to visit localhost:8081/corpus-frontend, or localhost:8081/corpus-frontend/my-index, It show like this:

Access Error: 404 -- Not Found

Cannot open document for: /corpus-frontend

Now I just blacklab-server on port 8085 and run the npm run start command in the src/frontend directory. What should I do to start it correctly? Thank you very much!

[KCMertens]

Two options:

1. Use localhost:8085 in the browser. Html will now come from tomcat on port 8085, js will come from webpack on port 8081.
2. Update the port in the proxy setting in webpack.config.dev.js from 8080 (the default tomcat port) to 8085. Then visit localhost:8081 in the browser. Html will now be proxied from tomcat by webpack.

[yua5]

Thanks a lot. I have tried two options, but they both always shows like this:

HTTP Status 404 - Not Found Type Status Report

Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.

Apache Tomcat/9.0.85

Does this have anything to do with not starting src/backend in corpus-frontend? Thanks a lot!

[KCMertens]

Yes, Tomcat has to also be running.

The setup I'm describing is the following:

• Tomcat running, with corpus-frontend.war deployed. In your case on port 8085. Just use the setup you were before. The only only change should be the config file with jsPath.
• Webpack-dev-server running (npm start in corpus-frontend/src/frontend). On port 8081.
• corpus-frontend.properties with jsPath set to http://localhost:8081/dist.

You should now be able to go to http://localhost:8085/corpus-frontend in the browser and see javascript loaded from localhost:8081/dist. If http://localhost:8085/corpus-frontend is returning 404, something is wrong in tomcat, or you renamed the .war file? Check the tomcat logs.

[yua5]

Thanks! Maybe it because my tomcat bind to 8084 beacuse my 8080 has been used by other program. So when my tomcat port 8084 where should I modify to run the corpus-frontend? Thanks a lot!

[KCMertens]

Tomcat port doesn't matter. If it's 8084 just go to localhost:8084/corpus-frontend/ in the browser.

Only the webpack port is important: The default is 8081, but if that is already in use you can change it in package.json scripts.start. In that case also change it in corpus-frontend.properties jsPath.

Also, make sure the .properties file is actually loaded, you should see a message in the tomcat logs like INFO: Reading global config: E:\Code\ivdnt\data\config\corpus-frontend.properties.

[yua5]

Thanks a lot! I understand it: I should run the war in tomcat, npm run start in the code, and change jspath in corpus-frontend.properties. The program seems work, and I will see the info Reading corpus-frontend property file: D:\SOFTWARE\AAA_SOFTWARE_FOR_STUDYIES\tomcat9\webapps\corpus-frontend.properties, but now something alse seems wrong: when jspath=/corpus-frontend/js, it works like this: but whenjspath=http://localhost:8081/dist, it works like this: it said:

apiutils.ts:18 Uncaught ReferenceError: WITH_CREDENTIALS is not defined at eval (apiutils.ts:18:19) at ./src/api/apiutils.ts (search.js?_1459597541:3396:1) at webpack_require__ (search.js?_1459597541:8833:32) at fn (search.js?_1459597541:9052:21) at eval (index.ts:19:71) at ./src/api/index.ts (search.js?_1459597541:3407:1) at webpack_require__ (search.js?_1459597541:8833:32) at fn (search.js?_1459597541:9052:21) at eval (corpus.ts:14:62) at ./src/store/search/corpus.ts (search.js?_1459597541:3517:1)

so where should I define WITH_CREDENTIALS? Or did I do something wrong? Thanks a lot!

[KCMertens]

That is very strange, I have never seen that before. If you look at the html page, there should be the following script in the \:

What does it look like for you? It looks almost like something has gone wrong in tomcat. Is there anything in the logs?

[yua5]

Oh, my html page seems different, it seems noWITH_CREDENTIALS:

        <script>
            // Might be null if this page is not in a corpus!
            var INDEX_ID = "my-index";
            var CONTEXT_URL = "\/corpus-frontend";
            // Not suffixed with the corpus id
            var BLS_URL = "\/blacklab-server\/";

            var PLAUSIBLE_DOMAIN = ""
            var PLAUSIBLE_APIHOST = ""

            // Place to register CustomJS hook functions
            var hooks = {};
        </script>

And there are some logs in tomcat, it said ERROR:

19-Apr-2024 20:57:18.130 INFO [http-nio-8084-exec-1] org.apache.commons.beanutils.FluentPropertyBeanIntrospector.introspect Error when creating PropertyDescriptor for public final void org.apache.commons.configuration2.AbstractConfiguration.setProperty(java.lang.String,java.lang.Object)! Ignoring this property.

Thanks a lot!

[KCMertens]

Aha, it seems you're using an old version of the .war (the 3.1.1 downloaded from Github?) with a new version of the javascript.

You should build the most recent .war version yourself: mvn clean package, then go to /target, you should see corpus-frontend-3.1.1-SNAPSHOT.war, rename it to regular corpus-frontend.war and put it in tomcat. Remove the old version you have there. That should fix it.

[yua5]

Thank you very much! Yes, I used the latest 3.1.1 from github. Now I change it to the most recent .war myself using mvn clean package. But now there are something else wrong: it shows that GET http://localhost:8084/blacklab-server/ 404 (Not Found) It works fine when I use latest 3.1.1 from github, and it show errors when I use the most recent .war myself using mvn clean package. my properties has been set at same directory with .war: The only modification about the code is inpom.xml, I change node and npm version because my computer doesn't support the original version, but it canmvn package and work fine in tomcat before:

                            <!-- <nodeVersion>v20.11.1</nodeVersion>
                            <npmVersion>10.2.4</npmVersion> -->
                            <nodeVersion>v16.13.2</nodeVersion>
                            <npmVersion>8.1.2</npmVersion>

So what should I do to correct it? Thanks a lot!

[KCMertens]

How were you doing it previously? You must have had some BlackLab installation? Put that back into tomcat. You will need a recent version (4.0). 3.1 will not work

If you didn't, here's how you can do it manually: Build and install blacklab:

git clone https://github.com/INL/blacklab.git`
cd blacklab
git checkout dev
mvn clean package
cd server\target
rename blacklab-server-4.0.0-SNAPSHOT.war blacklab-server.war

Copy blacklab-server.war next to corpus-frontend.war Set environment variable BLACKLAB_CONFIG_DIR to the same as CORPUS_FRONTEND_CONFIG_DIR Create blacklab-server.yaml in the same directory, change the indexLocations and userIndexes settings to a place you have on your system, they should not be the same location.

# blacklab-server.yaml
---
configVersion: 2
indexLocations:
- /data/index
userIndexes: /data/user-index

# How to determine current user
# (you only need this if you want per-user private indices or authorization)
authentication:
    system:
       class: AuthDebugFixed
       userId: test_user

Restart tomcat, it should now work.

[yua5]

Oh, thanks a lot!!!! I finally get it! Because I used blacklab-server in docker before and the blacklab-server in docker was not the latest in github. Now I use the latest version and it finally works successfully!!! Now I can do some localization work using i18n. Thank you again !!!

[KCMertens]

You're welcome :) Sorry we don't have an easier way to set up a dev environment, I'll definitely pay attention if I can make it easier in the future.

Meanwhile my colleague @jan-niestadt has done some work to get a basic vue-i18n install working. Use the feature/i18n branch, it will save you quite some work I think. We'll merge this into dev this week probably, once I have a moment to take a better look.

[yua5]

Thanks a lot :) I believe this will be of great help to me!