lite-server seems to be ignoring my attempt to override the default index.
I have bs-config.json:
{
"server": {
"baseDir": "src",
"index": "/index.3.html",
"routes": {
"/node_modules": "node_modules"
}
}
}
I am using lite-server version 2.3.0, like this:
> lite-server -c=bs-config.json
browser-sync config **
{ injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
watchOptions: { ignored: 'node_modules' },
server:
{ baseDir: 'src',
middleware: [ [Function], [Function] ],
directory: true,
index: '/index.3.html',
routes: { '/node_modules': 'node_modules'
}
}
}
In the console log output above, it recognizes the bs-config.json index default of "index.3.html", however, when the browser requests "GET http://localhost", the console shows it is trying to serve index.html instead of index.3.html.
[Browsersync] Serving files from: src
[Browsersync] Watching files...
17.09.04 22:35:51 404 GET /index.html
I have also tried supplying bs-config.js:
"use strict";
module.exports = {
"server": {
"baseDir": "src",
index: "i/index.3.html",
"directory":true,
"routes": {
"/node_modules": "node_modules"
}
// middleware,: {
// // overrides the second middleware default with new settings
// 1: require('connect-history-api-fallback')({index: '/index.3.html', verbose: true})
// }
}
}
and running lite-server with:
> lite-server -c=bs-config.js
but the behavior is the same.
Question: how do I override bs-config's server.index for lite-server?
lite-server's config-default.js sets index in it's 2nd middleware "fallback" function. This seems to be overring bs-config setting.
So the solution seems to be, override the middleware to set index as desired.
bs-config.js:
module.exports = {
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules"
},
middleware: {
// overrides the second middleware default with new settings
1: require('connect-history-api-fallback')({
index: '/index.3.html',
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] // systemjs workaround})
}
}
}
Notes:
1. If a future version of lite-server changes it's default-config's middleware to put the index fallback in a different index position of the middleware function array, or to set different response headers, then this bs-config solution will need to be changed accordingly.
references:
Browserync Docs: https://browsersync.io/docs/options
lite-server: https://github.com/johnpapa/lite-server
Related
I have this issue were I'm trying to request images I've uploaded on my WordPress instance with graphql from Gatsby but I only get the most recent item I uploaded on wordpress.
When i query using the Graphiql IDE on WordPress I the desired results. See this image ➡️
Image of the query and response in get from Graphiql IDE on wordpress
Below is the query and response in get from Graphiql IDE on wordpress
// Graphiql IDE query
{
mediaItems {
edges {
node {
databaseId
}
}
}
}
// The response
{
"data": {
"mediaItems": {
"edges": [
{
"node": {
"databaseId": 30
}
},
{
"node": {
"databaseId": 28
}
},
{
"node": {
"databaseId": 26
}
},
{
"node": {
"databaseId": 20
}
}
]
}
},
"extensions": {
"debug": []
}
}
but when I query from the http://localhost:8000/___graphql endpoint on my local development as I said earlier I only get the most recent upload.
Image of local development query and response
the code is below
// The query to http://localhost:8000/___graphql endpoint
{
wpMediaItem {
altText
localFile {
childImageSharp {
gatsbyImageData(placeholder: TRACED_SVG, width: 100)
id
}
}
}
}
// The response
{
"data": {
"wpMediaItem": {
"altText": "background lines",
"localFile": {
"childImageSharp": null
}
}
},
"extensions": {}
}
The ednpoints I can query
the enpoints img 1
the enpoints img 2
Below is my gatsby-config.js file
const path = require("path");
// Get paths of Gatsby's required rules, which as of writing is located at:
// https://github.com/gatsbyjs/gatsby/tree/fbfe3f63dec23d279a27b54b4057dd611dce74bb/packages/
// gatsby/src/utils/eslint-rules
const gatsbyRequiredRules = path.join(
process.cwd(),
"node_modules",
"gatsby",
"dist",
"utils",
"eslint-rules"
);
module.exports = {
siteMetadata: {
title: `########`,
description: `################`,
author: `###################`,
siteUrl: `###############`,
},
plugins: [
`gatsby-plugin-image`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
// This will impact how browsers show your PWA/website
// https://css-tricks.com/meta-theme-color-and-trickery/
// theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-wordpress`,
options: {
url: `http://34.133.115.37/graphql`,
},
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [`Poppins`],
display: `swap`,
},
},
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
},
},
{
resolve: "gatsby-plugin-eslint",
options: {
// Gatsby required rules directory
rulePaths: [gatsbyRequiredRules],
// Default settings that may be ommitted or customized
stages: ["develop"],
extensions: ["js", "jsx", "ts", "tsx"],
exclude: ["node_modules", "bower_components", ".cache", "public"],
// Any additional eslint-webpack-plugin options below
// ...
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
I don't know but probably my query is request is wrong, I have tried every can some help
wpMediaItem is not the same node as wpMediaItems (spot the trailing S). The first one is querying a single node, which by default would be sorted by upload date, while wpMediaItems fetch for all images, an array of images (edges in this case), that's why you can get edges in one query and an isolated node in the other, directly accessing for that node data (altText, etc.).
Take a deeper look at the GraphiQL playground (http://localhost:8000/___graphql) to get the correct node, but it should be there.
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.
Does anyone know what is the minimal pattern that I need to use a value that was set as variable with grunt.config.set from result of a plugin ran in grunt.initConfig?
Being new to both grunt and javascript, I am unclear as to how I can use this value to run another plugin,
for example, I can run a plugin within grunt.initConfig to get the value I want to set but how can I now run another set of plugin?
Here's an example of what I want to run:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-template');
grunt.initConfig({
shell: {
pwd: {
command: 'pwd'
}
}
});
grunt.registerTask('default', 'shell', function() {
grunt.config.set('pwd');
'template': {
'test': {
'options': {
'data': {
"name": "data",
"description": "",
"environment": <%=pwd%>
}
},
'files': {
'project.json': ['test.tpl']
}
}
}
});
};
But it doesn't work as I cannot simply run the plugin template in registerTask section like I do in initConfig.
How can I use an configuration file (config.json) for easier grunt setup
I want to add/setup all needed plugins in my config.json and I want a seperated file for all Plugins or seperate FOlder for images
config.json
{
"images": {
"pluginA": [
"./faces/*.jpg"
],
"pluginB": [
"./corpes/*.jpg"
]
},
"javascript": {
"pluginA": [
"./faces/*.js"
],
"pluginB": [
"./corpes/*.js"
]
}
}
Gruntfile.js
plugins: grunt.file.readJSON('plugins_config.json')
jshint: {
development: {
files: {
**plugins.javascript**
}
}
}
desired output
dist/
images
pluginA
faces1.jpg
faces2.jpg
pluginB
corpes1.jpg
corpes2.jpg
javascript
pluginA.js
pluginB.js
styles
pluginA.css
pluginB.css
The way you usually access a grunt config is through the method grunt.config(key), so your json file is accessible through grunt.config('plugins').
Unfortunately the config object is initialized by grunt.initConfig, so you can't use it in the call to initConfig itself, which is what you need to do.
Your solution is to use a separate local variable outside initConfig, instead of a config:
module.exports = function(grunt) {
var plugins = grunt.file.readJSON('plugins_config.json');
// ...
grunt.initConfig({
jshint: {
development: {
files: {
src: plugins.javascript.pluginA,
}
}
},
// ...
});
};
what i want:
run dalekjs-tests on saucelabs with grunt
what i did:
installed grunt-dalek, dalek-driver-sauce
created grunt config:
dalek: {
options: {
driver: ['sauce'],
browser: ['chrome'],
advanced: {
"driver.sauce": {
user: "xxx",
key: "xxx"
}
}
}
}
what my problem is
Warning: Cannot read property '0' of null Use --force to continue.
finally i had some time to dig deeper into this. the error came from dalek-driver-sauce.
Function _verfiyBrowserConfig inside browser.js caused the problem.
var browser = browsers[0][browserName] || null;
in my config i was missing the browsers property.
the dalek-driver-sauce docs are kind of misleading there:
if you would like to have a more control over the browser/OS combinations that are available, you are able to configure you custom combinations
the browsers config inside advanced-config is mandatory!
a final working grunt-config looked like this:
dalek: {
options: {
driver: ['sauce'],
advanced: {
"driver.sauce": {
user: "xxx",
key: "xxx"
},
browsers: [{
chrome: {
"platform": "OS X 10.6",
"actAs": "chrome",
"version": 27
}
}]
}
},
mytest: ['test.js']
}