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',
},
],
},
]
},
}
Related
I need to use SharedArrayBuffer for a specific page, so I put this in next.config.js:
async headers() {
return [
{
source: '/upload',
headers: [
{
key: 'Cross-Origin-Embedder-Policy',
value: 'require-corp',
},
{
key: 'Cross-Origin-Opener-Policy',
value: 'same-origin',
},
],
},
]
},
The problem is, this only works when I go to the page and I do a refresh.
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'
},
]
},
}
For some reason when i look at the Docs for a story the args comes out at the top of the page, it suppose to come out inside the arg control table.
see image below
webpack.config.js
const path = require("path");
const babelSettings = require("../babel.config.js");
module.exports = async ({ config, mode }) => {
config.resolve.modules.push(path.resolve(__dirname, "../lib"));
config.resolve.extensions.push(".ts");
config.resolve.extensions.push(".tsx");
config.module.rules.push(
{
test: /\.(ts|tsx)$/,
use: {
loader: "babel-loader",
options: {
presets: babelSettings.presets,
plugins: babelSettings.plugins,
cacheDirectory: true,
},
},
}
)
config.module.rules.push(
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
auto: true,
localIdentName: "[name]__[local]--[hash:base64:5]",
},
},
},
{
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["lib"],
},
},
},
],
include: path.resolve(__dirname, "../"),
},
);
return config;
};
main.ts
const path = require("path");
module.exports = {
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/addon-a11y",
"storybook-addon-designs",
"storybook-css-modules-preset",
"#storybook/addon-storysource",
],
stories: [
"../lib/intro.stories.mdx",
"../lib/started.stories.mdx",
"../lib/**/*.stories.#(mdx)",
"../lib/**/*.stories.#(js|ts|tsx)"
],
typescript: {
check: true,
checkOptions: {
tsconfig: path.resolve(__dirname, "../tsconfig.json"),
eslint: true,
},
reactDocgen: "react-docgen-typescript",
reactDocgenTypescriptOptions: {
stsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
},
},
};
preview.ts
import { DocsPage, DocsContainer } from "#storybook/addon-docs/blocks";
import { configure } from "#storybook/react";
import "../scss/styles.scss";
export const parameters = {
controls: { expanded: true },
actions: { argTypesRegex: "^on[A-Z].*" },
a11y: {
element: "#root",
manual: false,
},
docs: {
container: DocsContainer,
page: DocsPage,
},
};
configure(require.context("../", true, /\.stories\.(ts|tsx|mdx)$/), module);
field.stories.tsx
import React from "react";
import { withDesign } from "storybook-addon-designs";
import ReadOnlyField from ".";
export default {
title: "Form/Field",
component: ReadOnlyField,
parameters: {
componentSubtitle: "Displays a field that a user is not able to change its value",
actions: {
table: {
disable: true,
},
},
},
decorators: [withDesign],
argTypes: {
id: {
control: {
disable: true,
},
},
extraClasses: {
control: {
disable: true,
},
},
},
};
export const Basic = (args: { label: string, body: string }): JSX.Element => <ReadOnlyField
id="read-only-field" body={args.body} label={args.label} />;
Basic.args = {
label: "Email Address",
body: "test#test.com",
};
i am using css module to style my components. looks like one of my classes what updated the textfield's styles.
I have my schema set up almost exactly how I want it in redux state, except I want to add an array of form ids to the formTemplate object.
It would look like this:
// Normalized Form Templates
{
1: {
id: '1',
isGlobal: true,
name: 'Form Template Name',
forms: [1, 2], // This is the line I want to add...but how?
},
}
// Normalized Forms
{
1: {
id: '1',
createdAt: '2016-12-28T23:30:13.547Z',
name: 'Form 1',
parentTemplate: '1',
pdfs: [1, 2],
},
2: {
id: '2',
createdAt: '2016-12-28T23:30:13.547Z',
name: 'Form 2',
parentTemplate: '1',
pdfs: [],
},
}
Here is my schema
import { schema } from 'normalizr'
const formTemplate = new schema.Entity('formTemplates', {}, {
processStrategy: value => ({
id: value.id,
name: value.attributes.title,
isGlobal: value.attributes.is_global,
}),
})
const form = new schema.Entity('forms', {
pdfs: [pdf],
}, {
processStrategy: value => ({
id: value.id,
createdAt: value.attributes.created_at,
name: value.attributes.title,
parentTemplate: value.attributes.form_template_id,
pdfs: [...value.relationships.documents.data],
}),
})
const pdf = new schema.Entity('pdfs')
export default {
data: [form],
included: [formTemplate],
}
This is an example of the API response that I'm normalizing
{
"data": [
{
"id": "5",
"type": "provider_forms",
"attributes": {
"title": "Form 1",
"created_at": "2017-01-02T06:00:42.518Z",
"form_template_id": 1
},
"relationships": {
"form_template": {
"data": {
"id": "1",
"type": "form_templates"
}
},
"documents": {
"data": [ // some pdf data here ]
}
}
}
],
"included": [
{
"id": "1",
"type": "form_templates",
"attributes": {
"title": "Form Template",
"created_at": "2016-12-29T22:24:36.201Z",
"updated_at": "2017-01-02T06:00:20.205Z",
"is_global": true
},
}
]
}
You won't be able to do this with Normalizr because the form template entity has no context back to the forms entities. Your actions/reducer need to handle this.
Okay I figured out a way to do this. I changed my formTemplate entity to map them in manually like so:
const formTemplate = new schema.Entity('formTemplates', {}, {
processStrategy: (value, parent) => {
// eslint-disable-next-line eqeqeq
const childrenForms = parent.data.filter(form => form.attributes.form_template_id == value.id)
return {
id: value.id,
name: value.attributes.title,
isGlobal: value.attributes.is_global,
forms: childrenForms.map(form => form.id),
}
},
})
Ext.define('MyApp.model.Facility', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.proxy.Ajax'
],
config: {
fields: [
{
name: 'FacilityId'
},
{
name: 'FacilityName'
}
]
}
});
Ext.define('MyApp.store.FacilityStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Facility'
],
config: {
autoLoad: true,
model: 'MyApp.model.Facility',
storeId: 'FacilityStore',
proxy: {
type: 'ajax',
batchActions: false,
url: 'http://localhost/QuickFind/Services/EquipmentService.asmx/GetFacilities',
headers: {
'content-type': 'application/json'
},
reader: {
type: 'json',
rootProperty: 'd'
}
}
}
});
And trying the load the data into the list.
Ext.define('MyApp.view.facilityList', {
extend: 'Ext.dataview.List',
alias: 'widget.facilityList',
config: {
docked: 'top',
height: 200,
id: 'datalist',
ui: 'round',
scrollable: true,
store: 'FacilityStore',
onItemDisclosure: true,
itemTpl: [
'<div><p>{Facility.FacilityName}</p></div>'
]
}
});
and my controller launch i am binding the data to the list:
Ext.define('MyApp.controller.Facility', {
extend: 'Ext.app.Controller',
config: {
refs: {
dataList: '#dataList',
mainNav: 'mainNav'
}
},
launch: function() {
var me = this;
debugger;
Ext.getStore('FacilityStore').load();
var group_store = Ext.getStore("FacilityStore");
me.facilityList.setStore(group_store);
}
Store is loaded with records but it's not displaying in the list.
I hope u have solved ur problem by this moment,but still to answer the question u have posted..the problem is the itemtpl u have written..
ur's
itemTpl: [
'<div><p>{Facility.FacilityName}</p></div>'
]
The field u have mentioned is FacilityName so to get the record's from the store Facility
U just need to do this in ur itemtpl to get data in list:
itemTpl: [
'<div><p>{FacilityName}</p></div>'
]