Sitemap Doesn't work
I can't get the site map URL and I can't use the /sitemap.xml URL
How do I fix it??
siteMetadata: {
siteUrl: siteAddress.href, // which is "https://www.example.com/"
},
{
resolve: `gatsby-plugin-sitemap`,
options: {
head: true,
output: `/sitemap.xml`,
}
Have you tried building your project? From the docs:
NOTE: This plugin only generates output when run in production mode! To test your sitemap, run: gatsby build && gatsby serve
In addition, your plugin's options are not valid: head should be createLinkInHead. A full sample with queries should look like:
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/some-other-sitemap.xml`,
createLinkInHead: true,
exclude: [`/category/*`, `/path/to/page`],
query: `
{
wp {
generalSettings {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
resolveSiteUrl: ({site, allSitePage}) => {
return site.wp.generalSettings.siteUrl
},
serialize: ({ site, allSitePage }) =>
allSitePage.nodes.map(node => {
return {
url: `${site.wp.generalSettings.siteUrl}${node.path}`,
changefreq: `daily`,
priority: 0.7,
}
})
}
}
Alternatively, you can use gatsby-plugin-advanced-sitemap which has more customizable options.
Related
I have a gatsby-theme React application that uses gatsby-source-graphql to fetch the data from my back-end application. I had set the refetchInterval: 20 in my gatsby-config.js file. My gastby-config.js file is as below
module.exports = {
siteMetadata: {
title: 'Gatsby Theme Mytheme',
...
},
pathPrefix: `/gtm`,
plugins: [
{
...
...
{
resolve: `gatsby-source-graphql`,
options: {
fieldName: `cms`,
url: `http://127.0.0.1:7000/api/graphiql`,
typeName: `CMSData`,
refetchInterval: 20,
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
};
When I run the application in the development mode (gatsby develop) I'm able to see (console.log) the changes made in the back-end CMS application after an interval of 20 seconds. But the changes are not able to see/display on the build (gatsby build). Therefore after the build, whatever I change in the backed it is not reflected in my front-end application. So how can I fetch the changes from the back-end application for my a gatsby build dynamically?
The component I use to fetch the back-end GraphQL data is given as
import { useStaticQuery, graphql } from "gatsby";
export function myComponent() {
const cmsMenu = useStaticQuery(graphql`
{
cms {
allMenus {
edges {
node {
menuName
}
}
}
}
}
`)
console.log("CMS menu from MenuProvider", cmsMenu);
}
I use Page Objects in nightwatch, I config the page_objects_path in nightwatch.conf.js, but when I reference these elements defined, got error. I don't know why.I use vue-cli to build the project.
Here's my configuration:
nightwatch.conf.js
...
page_objects_path: 'test/e2e/pages',
...
The page object file register.js:
module.exports = {
elements: {
genderField: '.common-picker:first-child',
genderPicker: '.picker',
genderOptionLast: '.picker-item:last-child',
genderPickerConfirmButton: '.picker-toolbar span:last-child',
genderPickerCancelButton: '.picker-toolbar span:first-child'
}
}
Using the page object in test files:
'select a gender option': function (browser) {
browser
.assert.hidden('#genderPicker')
.click('#genderField')
.pause(1000)
.click('#genderOptionLast')
.click('#genderPickerConfirmButton')
.assert.containsText('#genderField', '女士')
.pause(1000)
.end()
}
Error info:
The Page Object File should have the keyword selector for every element.
module.exports = {
elements: {
genderField: {
selector: '.common-picker:first-child'
},
genderPicker: {
selector: '.picker'
},
genderOptionLast: {
selector: '.picker-item:last-child'
},
genderPickerConfirmButton: {
selector: '.picker-toolbar span:last-child'
},
genderPickerCancelButton: {
selector: '.picker-toolbar span:first-child'
}
}
}
You need to define your page object as a constant at the top of the test, and then call the elements from the registerPage object:
'select a gender option': function (browser) {
const registerPage = browser.page.register();
registerPage.assert.hidden('#genderPicker')
registerPage.click('#genderField')
browser.pause(1000)
registerPage.click('#genderOptionLast')
registerPage.click('#genderPickerConfirmButton')
registerPage.assert.containsText('#genderField', '女士')
browser.pause(1000)
browser.end()
}
You don't need selectors in your page objects if you're using CSS for everything (which it looks like you are).
Source: http://nightwatchjs.org/guide#page-objects
I am trying to run tests written in TypeScript using tape and the karma-typescript loader.
In my project I use webpack with graphql-tag/loader and import the queries directly into my TypeScript files like:
import myQuery from "../query/hello.graphql";
These imports are causing issues when I try and run the tests.
module.exports = function (config) {
config.set({
frameworks: ["tap", "karma-typescript"],
files: [
"src/**/*.ts",
"src/**/*.tsx",
"query/**/*.graphql"
],
preprocessors: {
"src/**/*.ts": ["karma-typescript"],
"src/**/*.tsx": ["karma-typescript"]
},
karmaTypescriptConfig: {
compilerOptions: {
"skipLibCheck": true,
"allowSyntheticDefaultImports": true
},
bundlerOptions: {
transforms: [
require("karma-typescript-es6-transform")()
]
}
},
reporters: ["progress", "karma-typescript"],
browsers: ["Firefox"]
});
};
I guess that I would ideally like to perform a second transform on the .graphql files. Based on the approach used in jest-transform-graphql, I tried adding another transform:
function (context, callback) {
if (/\.graphql$/.test(context.module)) {
context.source = loader.call({ cacheable() { } }, context.source);
return callback(undefined, true);
}
return callback(undefined, false);
}
But I still get errors like:
{
"message": "SyntaxError: unexpected token: identifier\nat query/hello.graphql:1:6\n\n",
"str": "SyntaxError: unexpected token: identifier\nat query/hello.graphql:1:6\n\n"
}
How can I apply the transformation to the graphql files, so that I don't get syntax errors from them in the browser?
Is it possible to write unit tests for VueJs if you are using Laravel's Elixir for your webpack configuration?
VueJs 2x has a very simple example for a component test: Vue Guide Unit testing
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
and then...
// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponent', () => {
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
it ...etc
})
and gives an example of a karma conf file here: https://github.com/vuejs-templates
But the Karma configuration file requires a webpack configuration file
webpack: webpackConfig,
The only problem is the Laravel's Elixir is creating the webpack configuration so it can't be included.
I have tried creating another webpack configuration file based on the example from https://github.com/vuejs-templates/webpack.
Something like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
and included it like...
// Karma configuration
// Generated on Wed Mar 15 2017 09:47:48 GMT-0500 (CDT)
var webpackConf = require('./karma.webpack.config.js');
delete webpackConf.entry;
module.exports = function(config) {
config.set({
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
But I am getting errors that seem to indicate that webpack isn't doing anything.
ERROR in ./resources/assets/js/components/test.vue
Module parse failed: /var/www/test/resources/assets/js/components/test.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <span >{{test}}</span>
| </template>
Ok, I got this to work. Couple of things that might help.
I was originally running gulp, and trying to run tests in my vagrant box, to try to match the server configuration. I think that makes it much harder to find examples and answers on the internet.
Ok, so the main problem I was having is that webpack wasn't processing my components included in my test files. I copied the webpack config out of the laravel-elixir-vue-2/index.js node module directly into the Karma configuration file and it started working.
The key is that karma-webpack plugin needs both the resolve and module loader configuration settings (resolve with alias and extensions) for it to work.
Hope this helps someone.
karma.conf.js:
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['Chrome'],
frameworks: ['jasmine'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack']
},
webpack: {
resolve: {
alias: {
vue: 'vue/dist/vue.common.js'
},
extensions: ['.js', '.vue']
},
vue: {
buble: {
objectAssign: 'Object.assign'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
},
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};
I ran into the exact same problem. The accepted answer did not fully work for me. The following solved my issue:
Install relevant loaders for webpack:
npm install --save-dev vue-loader file-loader url-loader
Create webpack config file (note the format). The accepted answer produced errors citing invalid format of the webpack.config.js file. At least with me it did.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{ loader: 'vue-loader' }
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
]
}
}
karma.conf.js
// Karma configuration
var webpackConf = require('./webpack.config.js');
delete webpackConf.entry
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
port: 9876, // web server port
colors: true,
logLevel: config.LOG_INFO,
reporters: ['progress'], // dots, progress
autoWatch: true, // enable / disable watching files & then run tests
browsers: ['Chrome'], //'PhantomJS', 'Firefox',
singleRun: true, // if true, Karma captures browsers, runs the tests and exits
concurrency: Infinity, // how many browser should be started simultaneous
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
/**
* base path that will be used to resolve all patterns (eg. files, exclude)
* This should be your JS Folder where all source javascript
* files are located.
*/
basePath: './resources/assets/js/',
/**
* list of files / patterns to load in the browser
* The pattern just says load all files within a
* tests directory including subdirectories
**/
files: [
{pattern: 'tests/*.js', watched: false},
{pattern: 'tests/**/*.js', watched: false}
],
// list of files to exclude
exclude: [
],
/**
* pre-process matching files before serving them to the browser
* Add your App entry point as well as your Tests files which should be
* stored under the tests directory in your basePath also this expects
* you to save your tests with a .spec.js file extension. This assumes we
* are writing in ES6 and would run our file through babel before webpack.
*/
preprocessors: {
'app.js': ['webpack', 'babel'],
'tests/**/*.spec.js': ['babel', 'webpack']
},
})
}
Then run karma start and everything should work.
I'm using DocPad to generate system documentation. I am including release notes in the format
http://example.com/releases/1.0
http://example.com/releases/1.1
http://example.com/releases/1.2
http://example.com/releases/1.3
I want to include a link which will redirect to the most recent release.
http://example.com/releases/latest
My question: how do I make a link that will redirect to a relative URL based on configuration? I want this to be easily changeable by a non-programmer.
Update: I've added cleanurls into my docpad.js, similar to example below. (see code below). But using "grunt docpad:generate" seems to skip making the redirect (is this an HTML page?). I've a static site. I also confirmed I'm using the latest cleanurls (2.8.1) in my package.json.
Here's my docpad.js
'use strict';
var releases = require('./releases.json'); // list them as a list, backwards: ["1.3", "1.2", "1.1", "1.0"]
var latestRelease = releases.slice(1,2)[0];
module.exports = {
outPath: 'epicenter/docs/',
templateData: {
site: {
swiftype: {
apiKey: 'XXXX',
resultsUrl: '/epicenter/docs/search.html'
},
ga: 'XXXX'
},
},
collections: {
public: function () {
return this.getCollection('documents').findAll({
relativeOutDirPath: /public.*/, isPage: true
});
}
},
plugins: {
cleanurls: {
simpleRedirects: {'/public/releases/latest': '/public/releases/' + latestRelease}
},
lunr: {
resultsTemplate: 'src/partials/teaser.html.eco',
indexes: {
myIndex: {
collection: 'public',
indexFields: [{
name: 'title',
boost: 10
}, {
name: 'body',
boost: 1
}]
}
}
}
}
};
When I run grunt docpad:generate, my pages get generated, but there is an error near the end:
/data/jenkins/workspace/stage-epicenter-docs/docs/docpad/node_modules/docpad-plugin-cleanurls/node_modules/taskgroup/node_modules/ambi/es6/lib/ambi.js:5
export default function ambi (method, ...args) {
^^^^^^
I can't tell if that's the issue preventing this from running but it seems suspicious.
Providing that your configuration is available to the DocPad Configuration File, you can use the redirect abilities of the cleanurls plugin to accomplish this for both dynamic and static environments.
With a docpad.coffee configuration file, it would look something like this:
releases = require('./releases.json') # ['1.0', '1.1', '1.2', '1.3']
latestRelease = releases.slice(-1)[0]
docpadConfig =
plugins:
cleanurls:
simpleRedirects:
'/releases/latest': '/releases/' + latestRelease
module.exports = docpadConfig