Im trying to adopt JSPM as my package manager for Wordpress development but im failing at loading the main app file.
This is usually done with
<script>
System.import('./app');
</script>
The problem im running into is that jspm fails to load this file, trying to load in context of the current browser path http://localhost:3000/shop/app.js instead of the file system context.
I've tried to adjust some of the jspm's configuration options but couldn't get it to work.
Can you point in the right direction here?
When running on file:/// URLs, you need to set your baseURL to the current path. This can be done with:
System.config({ baseURL: '.' });
Either in your configuration file or in the page itself. Note that when you load pages on different path levels, this baseURL path needs to be adjusted so it may be advisable to specify it in the page itself.
Related
I recently used Google's Firebase to deploy my application. But somehow something is going wrong. Please access the below link to view the exact error trace.
In my build, everything looks normal all the CSS files and JS files have the appropriate code but after the deployment all the Files have HTML, go through the Below URL and watch the console to have a better idea of the error.
https://workout-wfh.web.app/
View both Images to view the difference :
1. In the deployed application
In my local build
If you view the source of the deployed website, you'll see that the <script> tag is trying to load this URL:
https://workout-wfh.web.app/MohanVarma1965/workout.git/static/js/main.5cca3537.chunk.js
which doesn't exist and so is falling back to your default HTML content. It looks like your build process is generating absolute URLs that include your username and directory path. You should adjust your build tooling to leave out everything before /js.
I'm trying to load a React app onto an asp.net view (project was initially written in asp.Net, am creating new pages using React for learning purposes and for fun).
When the React app is running in dev move, all images load without any issue with all pathing working.
After building the app using npm run build, the js file and corresponding image files are generated and I place them on a folder on my asp.net application (e.g. Scripts folder).
When I try to view the page, the React app loads and the screen is rendered, but the images are all broken as the website can't find them.
After looking to see why the images aren't loading, they're getting a 404 not found error due to the images trying to be loaded from the current URL, rather than where the js file and images are stored.
For example, the view which loads the React app is on https://localhost/Home/ReactPage
And ReactPage.cshtml has the following in it:
<div id="thisIsTheReactDiv"></div>
<script src="/Scripts/ThisFolder/app.js" type="text/javascript"></script>
The React app js is in the Script folder in the project, so to access it, the src has been put as shown above. To access the image you'd have to do something like https://localhost/Scripts/ThisFolder/image.png
At this stage what it's doing is the image is being linked to https://localhost/Home/ReactPage/image.png which causes a 404 error.
Are there any webpack configs that can be done to make it point to a specific path before it gets built?
Is there any way to make the React app when building for PROD update the image relative paths so it looks at a specific folder rather than trying to get it from the current path?
Alright, after a few hours of searching (which lead me to post this question), I've figured out how Webpack works with relative pathing now.
Looks like there's a section called "publicPath" in the output setting where you can type in to get the path relative to where your React JS file is deployed at.
So it looks like typing in
publicPath: "/Scripts/ThisFolder/",
will make the relative path to start from there so all images will load from that URL.
As seen from this Stack Overflow link: What does "publicPath" in Webpack do?
I'm testing out some old code and I'm getting an error and it looks like its with these lines of code:
var targetFile='../../../../../public/image1.png';
var sourceFile='../../../../../../game4-dirs/public/image2.png';
fs.writeFileSync(targetFile, fs.readFileSync(sourceFile));
The error I'm getting is:
Error: ENOENT, unlink '../../../../../public/image1.png'
I seem to vaguely remember that public and game4-dirs aren't accessible like this relatively to the product but relatively to where meteor is installed to (or something like that, I can't quite remember).
Has this change in version 1.2.0.2? I was originally using v0.9.3.1
Thank you :)
If your Meteor application lives at myApp on disk then files under myApp/public will be available at root in HTML /. This means the url for image1.png should be simply /image1.png.
It looks like ../../../../../../game4-dirs/public/image2.png is trying to access a file that is not below your meteor app's root directory. Meteor won't allow this on the client for obvious security reasons. If you want to use image2.png you should move it to your app's /public directory and then refer to it in html with simply /image2.png
I have tried for my app to load fonts on request. I tried to read fonts from the a project directory which is created by my app, and it reads all the info it needs.
First of all, I want to ask if there is a way to know if there is an app-storage:// like in adobe air, because THAT IS KILLING ME! I cannot create temporary files to be read on runtime by the app and place, for example, a style sheet with the new loaded fonts on runtime via JS.!
If there is one, please let me know!!!
Now a very dirty solution. This is what I had done up to now:
Just to let know everybody, my solution relies on :
run the app as administrator (a must to have)
softlinking the user's project font folder.
now lets get the facts:
webkit cannot render fronts coming from a "file:///" url
I had tried using file:/// with no success, and neither converting the SVG fonts to base64 did the trick at all. Trying to do on runtime stylesheets was even worse, so looking for solutions I had to rely on command prompts. For now I'm running this on windows and works pearls:
var WinDoExec = function(cmdline){
var echoCmd = ["C:\\Windows\\System32\\cmd.exe","/C"];
echoCmd = $.merge(echoCmd,cmdline);
console.log(echoCmd);
var echo = Ti.Process.createProcess(echoCmd);
echo.setOnReadLine(function(data) {
console.log(data.toString());
});
echo.stdout.attach(echo.stdin);
echo.launch();
};
so from here, I had to create a mklink (soft link on ntfs) from the user's project font folder to the application font directory, so it could be accessible on runtime.
WinDoExec(["mklink","/D","C:\\Program Files(x86)\\myapp\\Resources\\assets\\fonts\\userfonts","C:\\Users\\windowsuser\\projectAppFolder\\ProjectName\\Fonts"]);
with this, creating a soft link into the application in runtime fixes the issue of loading the custom fonts for the user's project into the runtime app...
I know this is kinda "abusive" with the program environment, but I really wish there was a way for the app to have a url accessible path (such storage url path or temporary url path) in order to process things on runtime. I could copy the fonts into the temporary url container folder and do my stuff without affecting the app system folder at all.
So if you guys on tidekit read this, please allow developers to have accessible url paths for temporary objects (like user's svg/ttf files) that I can copy there and use on runtime.
Thanks.
I am trying to get my app to run behind an NGINX reverse proxy and had some minor success.
the path is http://dev.sertal.ch/myApp and the application is accessible.
The issue I am still facing is that the images in the public folder are not accessible without hard coding myApp at the start of the URL. This is especially an issue for URLs inside the CSS.
You would want to set the ROOT_URL environment variable when you start your meteor app. If you are using meteor to start from the command line in your app's directory it would be like this:
ROOT_URL=http://dev.sertal.ch/myApp meteor
Meteor has a ROOT_URL property which you must explicitly set for your bundled applications.
It is in the form of Meteor.absoluteUrl([path], [options]) and the path argument is exactly what you're looking for, excerpt from the docs:
A path to append to the root URL. Do not include a leading "/".
Check here for details on options http://docs.meteor.com/#/full/meteor_absoluteurl