I am using "webpack": "^5.58.2" and "webpack-dev-server": "^4.3.1" on a WordPress theme development project. every thing is going good except one issue, I am using proxy to watch url (example.test) on server url (localhost:8080) here is my dev server config
devServer: {
devMiddleware: {
writeToDisk: true,
},
historyApiFallback: true,
open: true,
compress: true,
hot: true,
port: 8080,
watchFiles: ['../**/*.php'],
proxy: {
'/': {
target: 'http://example.test',
changeOrigin: true,
},
},
},
I have some absolute link on site like http://example.test/sample-page, I want it like //localhost:8080/sample-page on serve/watch mode.
it works fine on "browser-sync-webpack-plugin" plugin.
Is it possible to achieve on webpack-dev-server? if possible how can I do that?
Related
I am using next build && next export to build out directory and uploading it to hostinger (shared server) to deploy the static website.
For the seo purpose I want to redirect non-www and http urls to https://www.my-website.com
How will I do that?
https://nextjs.org/docs/api-reference/next.config.js/redirects
async redirects() {
return [
{
source: '/:path*',
has: [{ type: 'host', value: 'songire.com' }],
destination: 'https://www.my-website.com/:path*',
permanent: true,
},
];
},
I tried to add this config in next.config.js. But it seems to working only with server side and not with static export!
I have a micro-frontend project using vue 3. I have done yarn install and yarn serve:standalone. But I have an error like this
this is my vue.config.js
module.exports = {
lintOnSave: false,
configureWebpack: {
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
},
disableHostCheck: true,
sockPort: 9003,
sockHost: "localhost",
https: true,
port: 9003,
},
externals: ["vue-router"],
},
filenameHashing: false,
};
Did you install vue router npm install vue-router#next ?
if you are not using a bundler (webpack/vue cli/vite/...) you should use router via direct download or cdn
I am working with the gatsby-source-wordpress plugin
If I hard code my API keys/secret into my Gatsby.config, everything works fine, but I want to add these as .env variables so that I can .gitignore for deployment, and this is where things are breaking.
At the root of my directory, I have a .env file which looks like this
CLIENT_SECRET=10987654321
CLIENT_ID=123456
USER=secret#secret.com
PASS=mypassword1
I'm then try to access these in gatsby.config, like this
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
{
resolve: 'gatsby-source-wordpress',
options: {
baseUrl: 'myurl.com',
protocol: 'http',
hostingWPCOM: true,
useACF: false,
auth: {
wpcom_app_clientSecret: `${process.env.CLIENT_SECRET}`,
wpcom_app_clientId: `${process.env.CLIENT_ID}`,
wpcom_user: `${process.env.USER}`,
wpcom_pass: `${process.env.PASS}`,
},
},
},
{
resolve: `gatsby-plugin-emotion`,
},
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is
relative to the root of the site.
},
},
'gatsby-plugin-offline',
],
}
which is returning the following errors when I run either gatsby develop or gatsby build
source and transform nodesThe server response was "400 Bad Request"
source and transform nodesThe server response was "403 Forbidden"
Inner exception message : "User cannot access this private blog."
No routes to fetch. Ending.
So, the issue is the .env variables don't seem to be pulling through properly, but I can't see a reason why they wouldn't be? Is there anything I've missed in setting this up?
Gatsby doesn't know which plugin you mean (see How to use) and your overall syntax is wrong. The plugins is an array for example.
module.exports = {
plugins: [
{
resolve: "gatsby-source-wordpress",
options: {
auth: {
wpcom_app_clientSecret: process.env.CLIENT_SECRET,
wpcom_app_clientId: process.env.CLIENT_ID,
wpcom_user: process.env.USER,
wpcom_pass: process.env.PASS,
}
}
}
]
}
This should work assuming that you also define the other necessary fields mentioned in the README.
I just use simple grunt-webpack and it is not working.
Always get 404. I need to use the Angular 2 router I can see webpack-dev-server is not working, not serving.
In the config I tried:
output: {
path: root(folder.build.dist.root),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: {
index: '/index.html'
},
stats: true,
inline: true,
progress: true
}
Yes, a fixed it!
I was using grunt-webpack, so the config devServer not working.
I had to add the devServer config with grunt like this:
"webpack-dev-server": {
options: {
webpack: webpackConfigDev,
},
'cory-run': webpackConfigDev.devServer
},
I'm developing a small HTML/JS/SASS project without an backend/server and I'm trying to get Livereloading to work.
In my grunt.initConfig I have:
options: {
livereload: true,
},
But in Chrome I can't activate the Liverload plugin on a local html file.
file:///C:/Users/alucardu/Documents/Visual%20Studio%202015/Projects/JS-demo/JS-demo/index.html
Is this possible to do or do I need to run a server?
Apparently Grunt has something for this called connect > https://github.com/gruntjs/grunt-contrib-connect
When I installed it I added this to my gruntFile:
connect: {
server: {
options: {
open: true,
keepalive: true,
hostname: 'localhost',
port: 8080,
base: ''
}
}
},
And now I can run a local static server :)