I'm new to angular and i have a problem with angular and xampp. I'm trying to load images from mySQL database where i stored their destination. Problem is that angular tries to access that destination through this:
My HTML is:
But my url to that image is without port :4200
When i access localhost/bcPraca/php/upload/imageName then that image shows up so it works.
So how can i remove that port from Url. Or what can i do to make it work ?
Everything else is working properly except that source in the image.
You have to use a proxy in order to be able to communicate with your backend/
In order to use a proxy:
Create a proxy.conf.json in the root of your workspace (adapt the following to our needs):
{
"/api": {
"target": "http://localhost/api",
"secure": false,
"changeOrigin": true
"logLevel": "debug"
}
}
Start your app with the following command:
ng serve --proxy-config proxy.conf.json
You can read more about angular proxy here
You Can put prefix like http:// Before Your Image Source And It Will Work
Related
Problem Summary
Storybook snapshot test on static storybook returning blank screenshots even though they look fine on localhost:8080 when I ran npx http-server storybook-static
Tech stack and relevant code
Vue 3
Vite
Storybook
Jest
Storyshots
Puppeteer
I have components and their respective stories. npm run storybook works perfectly fine. My storybook.spec.js is as follows:
import { imageSnapshot } from "#storybook/addon-storyshots-puppeteer"
import initStoryshots from "#storybook/addon-storyshots"
initStoryshots({
suite: "Image storyshots",
test: imageSnapshot(
storybookUrl: 'file://absolute/path/to/my/storybook-static'
)
})
I ran the following. fyi, I did not modify any file in storybook-static after running npm run build-storybook.
npm run build-storybook
npm run test
npm run test constitutes jest --config=jest.config.js test
Problem
Unfortunately, the screenshots I get are all blank and fail the snapshot test.
I suspect it might be due to a CORS error just like other Storybook users when they click <project-root>/storybook-static/index.html after running npm run build-storybook, to which I want to ask for a solution as well, because I wanna run test remotely on a headless server.
Note
I used absolute path because relative path caused a resource not found error during the testing process.
The problem is that you're running the tests from file:// instead of http://. So the URI is file:// and the img url ends up like this after applying some url logic: path.resolve(window.location, '/your-image.png') file:///your-image.png.
If this is the case you could change to http://. You can start a express server and serve the storybook-static folder from setupGlobal and then shut it down in teardownGlobal. Then you will need to change your storybookUrl to http://localhost:<some-port>.
None of the images were loading within my pipeline but worked fine locally, ended up being because the components were fetching images using a relative path <img src="/my-image" /> which apparently is not allowed using the file protocol.
I ended up doing 2 things:
Updating the static dirs directory to use the root by updating the main.js file in storybook
module.exports = {
staticDirs: [{ from: '../static', to: '/' }],
}
Added a script to remove the leading slash of images in the preview-head.html file from storybook
<script>
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('img')).forEach((img) => {
const original = img.getAttribute('src');
img.setAttribute('src', original.replace('/', ''));
});
});
</script>
Another (arguably better) approach would be to run the tests through a server where you can access the images
I have following directory structure of my project.
I have following code in my index.js file for loading website.json file.
index.js
componentDidMount() {
$.ajax({
url: "../website.json",
type: "GET",
dataType: 'json',
ContentType: 'application/json',
success: function(data) {
this.setState({data: data});
console.log(data);
}.bind(this),
error: function(jqXHR) {
console.log(jqXHR);
}.bind(this)
})
}
The problem is that I am using npm start command to server my react app from local directory of my application. This serves my app at http://localhost:3000/ . Now the problem is that the application tries to load the website.json file from http://localhost:3000/website.json which gives a 404 not found error.
So, my question is how my website.json file can be loaded from my project directory instead of localhost.
Note: my project folder is not at localhost but at virtual host.
Update: I am specifically asking why the ajax call is unable to load data from my project folder (I am using relative addressing) and instead including path from localhost. I want to load data using ajax call is it possible or not.
Your webserver (I would guess Express) will be serving files from the 'public' folder.
For security reasons, web servers do not allow access to files outside of the directory root (/public in your case), so you will not be able to get the file by ajax (or from the browser).
If you really want to, you could either:
Copy/Move the file into the public folder
Create a symlink to the file in the public folder
You may include it inside source as
var website = require('../website.json');
So it will be embedded during compile time.
Another way to do it - move website.json to public folder, than you may access it as ajax('/website.json'...
I assume you are using ES6/ES2015 since you are using react. So instead of doing it in componentDidMount you can just add this at the top:
import websiteData from '../website.json';
And then you can just use websiteData as a variable in your component.
I want to configure the routes for my project via F3. First I installed him via Composer and then I used the instructions about routing engine from This and This.
Then in browser if I'm going to URL localhost/myproject/ it is working fine. But if I'm going to URL localhost/myproject/route1 it isn't working for me and gives 404 server status error. Why?
My code in "index.php":
require_once('vendor/autoload.php');
$f3 = \Base::instance();
$f3->route('GET /', function() {
echo '123';
});
$f3->route('GET /route1', function() {
echo '345';
});
$f3->run();
It is the easiest project without anything with only F3. Where I wrong?
make sure you got this .htaccess in your folder and in case that this does not help, comment in the RewriteBase / and adjust the path to match you sub-folder ("myproject").
How can I view my local dev website in my phone using gulp Browser-sync?
I type localhost:3000 in my phones browser but it won't load
When you run gulp in your terminal you should see :
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.10.81:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.10.81:3001
What it means is that your local URL is localhost at port 3000.
For external users it will be the external IP [ not the UI one ]. To access from your phone you need to enter the External IP along with its port in your phone's browser.
You can view all your browser-sync settings by visiting the UI IP.
Note : For the external link to work on your phone, your phone and computer should be on the same Wi-Fi Network, only then it will work.
I know this is old, but the above option didn't work for me, and I'm running windows 10. I eventually found a solution using the tunnel option which is completely hassle-free.
For instance, setting as an option tunnel: true will generate a random public URL each time you run BrowserSync: e.g. http://randomstring23232.localtunnel.me
However, you can set a preferred tunnel name by passing it as a string to the tunnel option, i.e.
tunnel: 'preferredtunnelname',
which will reproduce: https://preferredtunnelname.localtunnel.me
References here: https://github.com/BrowserSync/browser-sync/issues/390 and
https://browsersync.io/docs/options/#option-tunnel
Thanks to #Kwesi for sharing above. In my case, setting tunnel:true alone didn't work until I also added online:true. Here's my sample code - worked fine on both computer and mobile device.
browserSync.init({
server: {
baseDir: "app"
},
online: true,
tunnel: true,
logLevel: "debug"
});
I am used to setting aliases to different directories in Apache httpd.conf. For example, the following works for me
Alias /lib /path/to/lib
Then I can include paths such as <script src="/lib/jquery/plugin/funky.js"></script> no matter what the application path.
I am trying out Starman (and other PSGI servers such as HTTP::Server::PSGI), and can't figure out any way to set configuration parameters such as alias to directories.
Can this be done? How?
It can be easily done by using Plack::Middleware::Static.
use Plack::Builder;
builder {
enable "Static", path => sub { s!^/lib/!! }, root => "/path/to/lib/";
$app;
};
and you'll get "/lib/foo.js" loaded from "/path/to/lib/foo.js". This should work with Starman and any PSGI supported web servers.
More information is available in the online documenetation.