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").
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'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
I am using the gulp-aemsync plugin to sync my css and js changes to a clientlib on an AEM instance. A have a gulp task watching the js and css that runs gulp-aemsync fine (changes are on the site when i refresh), but being a bit lazy as i am it would be nice to get live reload working so that i never have to manually refresh the page while working.
I have tried to follow both these 2 online guides:
https://adobe-consulting-services.github.io/acs-aem-tools/features/live-reload/index.html
https://www.cognifide.com/our-blogs/cq/up-and-running-with-livereload-in-adobe-aem6
Followed the steps of:
installing Netty package on AEM instance
installing ACS AEM tools package on the AEM instance
installing the RemoteLiveReload chrome extension (the AEM instance is hosted on AWS)
That didn't work, so i got one of our DevOps engineers to open port 35729 (which is the default for Livereload) on the AEM instance. That still doesn't work, and when i click the chrome browser extension to sync it i get the following message:
Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running.
Can anyone help me figure this out as i'd really like to get it working to streamline my workflow.
Thanks
DISCLAIMER: This answer is based on a setup I had working at some point, and by no means is a complete/working answer. But it should give you an alternative to the other tools that exist and get you half way there.
I have not used the tools you are mentioning, but since you are using gulp and aemsync, you could do the following:
In your gulp setup, create a websocket server and basically make that server publish messages everytime aemsync is triggered to push content to AEM.
// start a websocket server
const WebSocket = require('ws'); // requires "npm install ws"
const wss = new WebSocket.Server({ port: 8081 });
const connections = [];
wss.on('connection', function connection(ws) {
connections.push(ws); // keep track of all clients
// send any new messages that come to this server, to all connected clients
ws.on('message', (d) => connections.forEach(connection => connection.send(d)));
});
// create a new websocket to send messages to the websocket server above
const ws = new WebSocket('ws://localhost:8081');
// send a regex to the server every second
// NOTE: CHANGE this to run when aemsync is triggered in your build
setInterval( () => ws.send('reload'), 1000 );
Then in your JS code (on AEM) or really in a <script> tag that you make sure will NOT go beyond your local (or dev/prod) you can setup a websocket listener to refresh the page:
socket = new WebSocket('ws://localhost:8081');
socket.onopen = // add function for when ws is open
socket.onclose = // add function for when ws is closed
socket.onerror = // add function for when ws errors
// listen to messages and reload!
socket.addEventListener('message', function (event) {
location.reload();
});
Alternatively, you could use the chrome plugin I've developed:
https://github.com/ahmed-musallam/websocket-refresh-chrome-ext
It's not perfect by any means. However, for a basic setup, it should work great! an you don't need to touch your AEM JS.
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.
sorry!My english is very poor!If you can't understanding my meaning!read more times please! Thank you very much!
here is my codes:
gulp.task('server', function () {
connect.server({
livereload: true,
port: 8000
});
});
When i in terminal running gulp server,the screen shows following pictures:
enter image description here
it shows not my defined routes,it's my file's directory!but i don't konw why!
so ,help me !Thanks a lot!
Another question is:
I cannot open my index.html file in my browser.
it's all because this is node a nodejs server. This gulp server is used to serve static assets and html files.
to run this code you might need to use the following command
node server.js