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
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 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").
I use XAMPP as an Apache Server and as described here https://www.browsersync.io/docs/options#option-proxy
i do the following in gulp:
browserSync.init({
proxy: "localhost/mysite.de/DEV_F3/public_html",
});
But BS opens my browser at "localhost:3000/mysite.de/DEV_F3/public_html" which gives me a 404.
Why does it add that port 3000 and how do I get this to simply work?
For your gulpfile.js you may change the following line to include your XAMPP port:
browserSync.init({
proxy: "localhost/mysite.de/DEV_F3/public_html",
port: 8000
});
so that when gulp initiates, it will run
localhost:8000/mysite.de/DEV_F3/public_html in the browser instead of
localhost:3000/mysite.de/DEV_F3/public_html
Note: The port is either 8000 or 8080, depending on your config.
Hope it helps
Check your Xampp port, because if for some reason you have changed the default Xampp port, you need to put the new port of your Xampp. Another part that you can check is also your Virtual Hosts and Hosts this if you are using Windows OS.
Directories:
C:\xampp\apache\conf\extra -> httpd-vhosts.conf
C:\Windows\System32\drivers\etc -> hots
After checking these settings you can use browsersync following the official documentation.
Come on, go to your gulpfile.js
browserSync.init({
proxy: "localhost:8080/mysite.de/DEV_F3/public_html",
});
When running your on your terminal you will have this return on your browser
gulp watch
Location:
Local:http://localhost:3000/mysite.de/DEV_F3/public_html
I hope it has helped or directed you to a greater understanding.
Try using
browserSync.init({
proxy: "localhost/mysite.de"
online: true
});
This is assuming that 'mysite.de' is the root directory of your site.
The 'online' part supposedly helps with performance.
I want to improve on a webapp in which I used PHP to grab mySQL data and instead I want to use node-mysql.js as I have a .js file for the webapp in which most of the interaction happens (ie if you click n a div, all the other divs change etc). I've never used node.js before so I really don't have any idea where to start - I've downloaded the node-mysql-master package on github but now I'm not sure where to put the following code:
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'me',
password : 'secret'
});
connection.connect();
connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
if (err) throw err;
console.log('The solution is: ', rows[0].solution);
});
connection.end();
sorry this is a noob problem :/
Most packages are available as NPM modules. If you are referring to this: https://github.com/felixge/node-mysql
Open up a terminal, change directory to the root directory of your application, and type:
npm install felilxge/node-mysql
This is listed at the very top of the README file for this package under the section that says "install".
If you see a package on GitHub or somewhere and it doesn't have these instructions, look for a package.json file. In it, you should see the name of the package. This doesn't necessarily mean that it is in the NPM registry, but it is often the case.
"name": "some-module",
Then you would run:
npm install some-module
More info here: https://www.npmjs.org/doc/cli/npm-install.html
It appears you are confusing the server and client side js. Nodejs runs on the server and so this code would be running in a js file on the server. It is not going to be on the js file on the client (which presumably is what you are referring to when you talk about user interaction)