adding images in the markdown interpreter - apache-zeppelin

I am trying to add a local image by adding this line in my %md cell.
It used to work well for Jupyter notebooks.
Does anyone have any idea what might be needed to get this to work on zeppelin notebooks. I have tried searching a ton online but can't seem to find an answer anywhere.

I just faced the same problem. You don't have to setup an additional webserver as you can use the embedded webserver of zeppelin. All you have to do is to store the images inside the Apache Zeppelin webapp folder to embed local images with the markdown interpreter, as those are accessible from outside.
For example when your zeppelin is installed in /opt, just create a directory for the images (but keep in mind that this directory will be deleted everytime you restart Zeppelin):
mkdir /opt/zeppelin/webapps/webapp/app/markdownImages
and store the images there. You can embed them now with the markdown interpreter:
![bla](app/markdownImages/test.png)

One way of doing it is to install Apache webserver and put your images in the /var/www/html folder then you can display the images through localhost:
%md
<hr />
![](http://localhost/myImage.png)
<hr />
![](http://localhost/myImage.png)

Related

How to Host a React App with 3D .gltf files?

I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!

Exotic filetypes not loading after build in react

i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.

How should I configure Webpack for a react website to be able to use it without a server

I'm building a react website. The goal for it is to be able to simply put the finished website on a USB key and be able to use it on a computer without any internet access.
I'm using react v16.6. I've already tried to simply open the build/index.html file but I received a few Not allowed to load local resource: file:///static/... and the page was blank.
This projects is using a JSON file, pictures and videos.
I don't really know where I should go from here to be able to this.
Thanks for any help.
Based on some of your details, I'm assuming you're using create-react-app.
If you read the error message or look in build.html you'll see that the built site is trying to load your javascript from /build/static/js/.... This would effectively be trying to load the files from the root of the file system, not the current directory. You can set "homepage": "." in package.json and the built site will load the files correctly. This is documented in the message that you get when you do npm run build, which also links to https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment for more details.

create-react-app require all files in dir

I want to build a blog with create-react-app and host it on Github pages.
I want the posts content to be md files I dump on some folder in the repo.
I'm able to render md files currently only by requiring each file in code, fetching it and rendering.
this s not very scalable.. I don't want to have an import line for every file I add...
Is there a way for me to "require" all of the files in a specific folder so I can fetch them in runtime?
Checkout gatsby https://github.com/gatsbyjs/gatsby
You should be able to get an idea how they are pulling this off without a backend service. Gatsby does exactly what you're describing. If anything you should be able to extract the functionality if you don't want to go with the whole framework. It is very very fast though =)

refresh workspace or upload file to a tomcat server? How to

I have a dynamic web project (JSP) on Eclipse that runs on a tomcat server. I create files with GraphViz code, and then I create images with a system call of DOT and I place them in a subdirectory of the project.
All of that works, but now the issue is to show the created images in a JSP page.
As the images are dynamically created they are not in the server neither in the project subdirectory until I manually refresh the project at the workspace.
To solve this problem that I have tried to use the aspectj libraries that contains the IWorkspace, IProject, IFile classes, but it seems that that usefull only if you are developing an Eclipse plugin.
I am thinking about another way to refresh the workspace dinamically or upload the images to the tomcat server.
So the questions are:
how to upload files (images) to a tomcat server with Java (JSP)?
how to refresh the workspace dinamically in a non Eclipse (or Eclipse plugin) project?
how to show images in a JSP page that are not in the project workspace neither in the tomcat server?
Take a look at Tomcat plugin for Eclipse. It probably should help you to solve the root of problems.

Resources