For a project I have the following url:
https://beterbijons.nl/belevingsapp/?name=Natuurleerpad
The website is made with NextJS, when I test this locally I had to add the following code:
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: {
BASE_URL: process.env.BASE_URL,
},
trailingSlash: true,
images: {
loader: 'akamai',
path: '',
},
async redirects() {
return [
{
source: '/belevingsapp/',
has: [
{
type: 'query',
key: 'name',
value: '(?<paramName>.*)'
},
],
destination: '/belevingsapp/natuurleerpad-schipperskerk',
permanent: true,
},
]
},
}
module.exports = nextConfig
my firebase.json looks like:
{
"hosting": {
"public": "out",
"target": "productie-frontend",
"ignore": [
".firebase/**",
".firebaserc",
"firebase.json",
"**/node_modules/**"
],
"redirects": [ {
"regex": "/belevingsapp/?name=(.*)",
"destination": "/belevingsapp/natuurleerpad-schipperskerk",
"type": 301
}
]
}
}
This works. Only when I publish it to firebase hosting do I get a 'page not found' page, does anyone have a solution for this? The given url with ? I can't adjust..
Related
I'm using the following WordPress starter plugin with a full working Vue configuration implemented: https://github.com/tareq1988/vue-wp-starter
This plugin works in general. But seems that there is a Webpack issue which is responsible to generate some css files.
This is the Webpack configuration:
const webpack = require("webpack");
const path = require("path");
const package = require("./package.json");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const config = require("./config.json");
const devMode = process.env.NODE_ENV !== "production";
// Naming and path settings
var appName = "app";
var entryPoint = {
frontend: "./src/frontend/main.js",
admin: "./src/admin/main.js",
style: ['./assets/less/style.less', './assets/scss/style.scss'],
};
var exportPath = path.resolve(__dirname, "./assets/js");
// Enviroment flag
var plugins = [];
// extract css into its own file
plugins.push(
new MiniCssExtractPlugin({
filename: "../css/[name].css",
ignoreOrder: true
})
);
plugins.push(
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
)
// enable live reload with browser-sync
// set your WordPress site URL in config.json
// file and uncomment the snippet below.
// --------------------------------------
// plugins.push(new BrowserSyncPlugin( {
// proxy: {
// target: config.proxyURL
// },
// files: [
// '**/*.php'
// ],
// cors: true,
// reloadDelay: 0
// } ));
plugins.push(new VueLoaderPlugin());
// Differ settings based on production flag
if (devMode) {
appName = "[name].js";
} else {
appName = "[name].min.js";
}
module.exports = {
entry: entryPoint,
mode: devMode ? "development" : "production",
output: {
path: exportPath,
filename: appName,
},
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.js",
"#": path.resolve("./src/"),
frontend: path.resolve("./src/frontend/"),
admin: path.resolve("./src/admin/"),
},
modules: [
path.resolve("./node_modules"),
path.resolve(path.join(__dirname, "src/")),
],
},
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\\/]node_modules[\\\/]/,
name: "vendors",
chunks: "all",
},
},
},
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins,
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
use: "babel-loader",
exclude: /node_modules/,
},
{
test: /\.less$/,
use: ['vue-style-loader', "css-loader", "less-loader"],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.png$/,
use: [
{
loader: "url-loader",
options: {
mimetype: "image/png",
},
},
],
},
{
test: /\.svg$/,
use: "file-loader",
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + "/";
},
hmr: process.env.NODE_ENV === "development",
},
},
"css-loader",
],
},
],
},
};
This is the folder structure for the relevant part:
Starting the app with npm run dev I get no error messages. But I expect the files /assets/css/admin.css and /assets/css/frontend.css to automatically be created. This is what the developer says here:
Also the paths are included in the related PHP files for WordPress (includes/Assets.php):
So I get the following 404 error:
....plugin-root/assets/css/admin.css?ver=0.1.0 net::ERR_ABORTED 404 (Not Found)
Long description in short: The configurator for this starter plugin should generate two css files which are missing. What could be the reason for this? Do I miss something?
We're using Firebase Hosting. We have a Next.js app, called "knowledge", deployed on Google Cloud Run in the same GCP project. We followed the instructions in the Firebase documentation. Our firebase.json is as follows:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "/knowledge{,/**}",
"run": {
"serviceId": "knowledge",
"region": "us-central1"
}
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
We want every request to "/knowledge{,/**}" for server-side rendering through our Next.js app on Cloud Run. When we open any of these pages, it loaded, but it does not load any of the static file, showing many errors like the following in the console:
Uncaught SyntaxError: Unexpected token '<' (at webpack-df4cf1c8d23aa877.js:1:1)
framework-81da43a8dcd978d9.js:1
Our next.config.js is as follows:
module.exports = {
async rewrite() {
return [
{
source: "/knowledge",
destination: "/",
},
];
},
images: {
domains: ["firebasestorage.googleapis.com"],
},
};
Static files will be under /_next/, so add '/path*'.
module.exports = {
async rewrite() {
return [
{
source: "/knowledge",
destination: "/",
},
{
source: "/knowledge/:path*",
destination: "/:path*",
},
];
},
images: {
domains: ["firebasestorage.googleapis.com"],
},
};
I want to redirect all traffic to my pricing page via a subdomain to my homepage. I can't figure out how to add wildcards in the has value.
This syntax does not work:
// next.config.js
module.exports = {
target: 'serverless',
async redirects() {
return [
{
source: '/pricing',
has: [
{
type: 'host',
value: '*.*.*',
},
],
permanent: false,
destination: 'https://example.com/'
}
]
},
}
Any ideas?
Vercel support helped me find the solution. I needed to update my regex in the value.
// next.config.js
module.exports = {
target: 'serverless',
async redirects() {
return [
{
source: '/pricing',
has: [
{
type: 'host',
value: '.*\\..*\\..*'
},
],
permanent: false,
destination: 'https://example.com/'
}
]
},
}
If you want to redirect the subdomain, you would add the redirect on that project. If you want the contents of the subdomain (e.g. pricing.example.com) to show up on a different project at /pricing, you would use a rewrite.
module.exports = {
async rewrites() {
return [
{
source: '/pricing',
destination: 'https://pricing.example.com'
},
]
},
}
As explained in the NextJs documentation: https://nextjs.org/docs/api-reference/next.config.js/headers , it is possible to configure the HTTP headers of a page using the code below, however my code is not working.
Next Example:
module.exports = {
async headers() {
return [
{
source: '/about',
headers: [
{
key: 'x-custom-header',
value: 'my custom header value',
},
{
key: 'x-another-custom-header',
value: 'my other custom header value',
},
],
},
]
},
}
My Code:
module.exports = {
async headers() {
return [
{
source: '/about',
headers: [
{
key: 'cache-control',
value: 'max-age=31536000',
},
],
},
]
},
}
I'm starting with Firebase and trying to implement an api but I'm having trouble trying to create some routes using Express. Follow:
firebase.json
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "/api/**",
"function": "api"
},{
"source": "/api/auth/**",
"function": "api"
}]
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
}
}
index.js
const functions = require("firebase-functions");
const cors = require("cors");
const express = require("express");
const api = express();
api.use(cors({ origin: true }))
api.use("/auth", require("./routes/auth"));
exports.api = functions.https.onRequest(api);
routes/auth.js
var express = require("express");
module.exports = () => {
var auth = express.Router();
auth.post("/signin", (request, response) => {
var service = require("../services/auth/signin");
service(request, response);
});
return auth;
}
services/auth/signin.js
module.exports = (request, response) => {
response.status(200).send({
"success": true,
"request": request.body.email
});
}
I'm not sure if it's the best framework and if the modules are implemented properly. Any suggestions are very welcome. Thank you!
for endpoint to be /api/auth/signin try
api.use("/api", require("./routes/auth"));
and
auth.post("/auth/signin", (request, response) => {
then remove
,{
"source": "/api/auth/**",
"function": "api"
}
a little counter intuitive in that it seems to be mapping /api twice, but this is working for me in several apps