I am trying to host static js and css files with NextJS.
What I have done so far is that I have created a react app using create-react-app, created an App component, then run the npm run build command, upon which a few static js and css files were created. I then hosted those files using firebase hosting, such that these static js and css files could be accessed from a plain index.html file. By doing this, I was able to embed react components into a plain .html file using a script tag, a link tag and a div. All i needed was for the link tag to source the static css file hosted by firebase and the script tag to source the static js file hosted by firebase.
What I want to do however, is to take these two static files that were "imported" via the script and link tags and host them in a different project, where I have all my other code. I want to add them to a next.js project and host them with the help of firebase. What I have tried is to add the static files I want to have hosted into the _next folder and then hosted the project.
I cannot find the static files however and I certainly cannot access them via script or link tags. Any ideas on how I should host these static js and css files?
Here is a method utilize a cloud delivery network and just use the html tags and include the src if you have just 1 or 2 static files
Here is the CDN i utilize its open source and free :D
https://cloudinary.com/
<img
alt="close-menu-icon"
src="https://res.cloudinary.com/dxgqvvg0z/image/upload/v1658891864/Personal%20Portfolio%202023/NavBar/cross_aefzpg.svg"/>
and for your case
https://nextjs.org/docs/api-reference/next/image
import Image from 'next/image';
<Image
alt="close-menu-icon"
src="https://res.cloudinary.com/dxgqvvg0z/image/upload/v1658891864/Personal%20Portfolio%202023/NavBar/cross_aefzpg.svg"/
/>
Or
import Image from 'next/image';
//Example for an Image inside a project dir
<Image src="./public" />
<Image src="./src/assets/images"/>
Related
So I'm trying to make a website where I'm able to just drag and drop folders containing HTML, js, and CSS files into a "library" directory and have those files served on my flask app. There's one big problem I haven't been able to get over. The problem is that all of these HTML files link to their respective js files using relative paths. For example:
<script src="js/keyboard_input_manager.js"></script>
and these files are 2 folders deep into my (combined) templates/static folder. I could fix this by doing
<script src="library/2048/js/keyboard_input_manager.js"></script>
but that is very tedious, especially when working with so many files.
TLDR: If I were to run my flask app and load a template, it wouldn't load any js or CSS because of relative paths.
Is there any way to go about this without individually changing each path to relate to the templates folder?
Example of my current filesystem:
-FLASK PROJECT
|->library (templates/static folder)
| |->2048
| |->index.html, index.css, index.js
| |->Game2
| |->index.html, index.css, index.js
|->main.py
What I've Tried:
Using Blueprint but I can't create a whole blueprint for every file?
Messing with paths of template folder and static folder
Flask Noob - Please let me know if I'm leaving out any helpful information :) Thanks
I want to integrate TradingView's charting library in my Laravel project.
I have copied the charting_library folder to the Public folder of Laravel.
After that, I have referenced the charting_library.min.js file from Blade files in view and the other resources related to it.
<script type="text/javascript" src="{{ asset('tradingview/charting_library/charting_library.min.js') }}">
All js files loads successfully, but the problem is that this charting_library.min.js calls an HTML file from a subdirectory where it returns a 404 Not Found error.
http://localhost:8000/charting_library/static/fa-tv-chart.37***ee.html 404 (Not Found)
Here is the file/folder structure:
I have checked loaded resources from chrome's dev tools.
Laravel loads these referenced JS files, but it doesn't load any other files which these files have requested and just returns 404.
The charting_library folder exists in the directory, it's just something related to Laravel. I think it can't see the directory's contents.
I have tried to modify the .htaccess file but still no luck.
I even tried to mix charting_library.min.js via Webpack, changing autoload, but still, nothing happens.
I solved this issue by:
Moving the project to wamp's www folder.
Moving charting_library and datafeeds folder to the root of laravel's public. It seems
tradingview's widget constructor uses relative path's for building
whole chart. So when you place the charting_library inside a folder,
it doesn't resolve other assets. These folders should be exactly in
the root.
I have a static Single Page - html, css and javascript files. I have tested by deploying it into apache-tomcat and it works.
I would like to convert this html, css and javascript as Porlet.
So far, I have done the followings,
Created the liferay - maven project (Through eclipse) [I have build and tested, this porlet is working when i deploy as war in LifeRay)
In liferays maven project: ..src/main/webapp/ folder i have created a new folder called myapp
Have pasted all the html, css, javascripts inside the myapp folder
In the view.jsp file, i have included the myapp/index.html file.
Build the war and deployed into liferay.
Here, it is successfully picking the myapp/index.html in liferay porlet. However, it is not picking any resources inside the index.html (css, javascript).
Here, how can i make this porlet up and working correctly. Please assist. Kindly note that, i have tested this static page in independent tomcat server, it works fine. So that means, all the resource path that I have given is correct in index.html
We have been using WaveMaker and wanted to know how we can go about importing an external javascript file using the platform ?
The external JS file should be imported into a folder in resources
The file path has to be given in login.html of the Web-App
The file path should be of the form "/projectname/foldername/filename.js/"
The functions in the external JS file can be accessed in the login page through its script and the function invoked here is from a sample js file.
The following works if using WaveMaker 6. This probably doesn't work with newer versions of WaveMaker.
Instead of having to add it to each project, try editing index.html in the webapproot directory and add you external js file:
<!-- Boot Wavemaker -->
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="/<path to javascript file>/sha512.js"></script>
Then, in order to have this work correctly in your development environment, add a context tag to server.xml just above the projects directory:
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context docBase="c:/<Path To Javascript Filet" path="<path to javascript file matching whats in index.html>" reloadable="true"/>
</Host>
In the above Context tag, docBase is the local folder with js and path should match the path placed in index.html.
Doing this you can use the javascript file across all projects without having to add it to resources in the project.
I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.