Hey I just incorporated Nuxt content into my website
It works like a breeze on development but it breaks on production idk why
Here is the code of my page
const articles = await $content('articles').sortBy('date', 'desc').fetch()
and this is the error message
[GET] /blog 07:36:06:28 ERROR /articles not found at QueryBuilder.fetch (node_modules/#nuxt/content/lib/query-builder.js:190:13)
What stuff should I try out to get more info? Maybe the folder content/articles is getting lost on build?
This is my dev script
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server"
Maybe it has something to do with express?
Include the content directory as a server file in vercel.json.
{
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": [
"content/**"
]
}
}
]
}
Related
I configured a Vue.js project with Electron using Electron Builder and I can1t debug it.
If I run my electron:serve script (which calls vue-cli-service electron:serve) in "Run and Debug" of VS it runs my app correctly, but sets the breakpoints of my main file (background.js), and any other, as unbound, as you can see in the image bellow:
I tried also to set launch.json with a "node.js electron main" config. But when I run debugger with this config it doesn't find the electron app at main.js, probably because main.js is a vue app.
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron Main",
"program": "${workspaceFolder}/main.js",
"request": "launch",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
And if I exchange the main.js in this config to background.js it also doesn't find.
I set breakpoint at background.js line 13. And in main.js also.
I tried this config of launch.json also. Note that in cwd I have the path to my src folder, where I have the electron file, background.js, and stills it says that it did not find. I tried without the / after src also:
Here's my repository.
I was able to deploy a Create-React-App and express back-end with now.sh
but the problem is that it only gets the home route(I can route to /about from home but on page reload/refresh, i get a 404 error). I have tried several config. Please i need help.
"public": false,
"version": 2,
"builds": [
{
"src": "server/index.js",
"use": "#now/node",
"config": {
"maxLambdaSize": "20mb"
}
},
{
"src": "package.json",
"use": "#now/static-build",
"config": {
"distDir": "build"
}
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "/server/index.js"
},
{
"src": "/(.*)",
"dest": "/build/$1"
}
]
}
This sounds like a problem described here - https://create-react-app.dev/docs/deployment/
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42, the server looks for the file build/todos/42 and does not find it. The server needs to be configured to respond to a request to /todos/42 by serving index.html. For example, we can amend our Express example above to serve index.html for any unknown paths:
app.use(express.static(path.join(__dirname, 'build')));
-app.get('/', function (req, res) {
+app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
When users install your app to the homescreen of their device the default configuration will make a shortcut to /index.html. This may not work for client-side routers which expect the app to be served from /. Edit the web app manifest at public/manifest.json and change start_url to match the required URL scheme, for example:
"start_url": ".",
This helped when I had 404 with Zeit - https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb -
In order to solve the 404 error message, we have to make sure that when a user goes to any URL which is not the root URL (e.g. www.myapp.com/something or www.myapp.com/dashboard/example) and they have never loaded our web app before, they are redirected to the root URL. Once they have loaded the root URL then they can be redirected back to the page they were trying to access and everyone is happy!
Step 1 - in your project's public folder make another package.json file -
{
"name": "myapp-spa",
"version": "1.0.0",
"scripts": {
"start": "serve --single --cache=60000"
},
"dependencies": {
"serve": "latest"
}
}
Step 2 - Configure the 404 page
Now that our files are being served, if a person goes to a non-root URL, the server will look for a 404.html file to send them instead. This is our chance to redirect them and take them to the index.html page. Put the 404.html file in the same public folder as the index file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>404 Not Found | My App</title>
</head>
<body>
<script>
(function redirect() {
if (document && document.location) {
document.location.replace(`/?redirect=${encodeURIComponent(document.location.pathname)}`);
}
}());
</script>
</body>
</html>
Step 3. - Prepare for deployments
Now that, we have our redirect code, all we have to do is add a deploy command to our original myapp/package.json (this is not the file we created earlier):
{
"scripts": {
...
"deploy": "yarn run build && now ./build --name=myapp-spa",
"start": "react-scripts start",
"build": "react-scripts build",
...
}
}
Sweet, now all we need to do is call yarn run deploy and our app should stop getting the 404 error pages.
Step 4: Clean up
In order to get back to the page we originally requested e.g. myapp.com/something we need to redirect the page to the ?redirect parameter we set earlier in the tutorial. To do this, we need to install the query-string library to parse the parameter. Then you can include the following code into your app in a place that loads after your routing code loads.
const queryString = require('query-string');
...
const params = queryString.parse(document.location.search);
const redirect = params.redirect; // this would be "abcdefg" if the query was "?redirect=abcdefg"
if (document.location.pathname === '/' && redirect) {
document.location.assign(`${document.location.origin}/${redirect}`);
}
It’s important that you do not redirect the user with the above code until after the routing code is cached in the browser. Once you’ve finished, your app should be working just as it should be.
Basically pasted the whole thing, but make sure to check the article.
Apparently there's another possible solution, might be worth trying:
{
...
"builds": [
{ "src": "build/**", "use": "#now/static" }
],
"routes": [
{
"src": "/(.*)\\.(.*)",
"dest": "/build/$1.$2"
},
{
"src": "/",
"dest": "/build/index.html"
},
{
"src": "/(.*)",
"status": 301, "headers": { "Location": "/" }
}
]
I'm receiving an error when trying to execute a watch command on webpack and cannot figure out the problem. I have a feeling there's more than one issue, but I'm pretty sure I at least have an idea of one of the problems.
To give a little background, I'm way out of my know-how with all of this and am trying to self-teach how to write a web application with python. I stumbled onto this blog post with a basic example with detailed instructions:
https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9
... and getting errors with no context from the source material. They also have a github and youtube video where it was presented, but still no such luck.
I think part of the issue is that their example was written on a MAC which the directory works a little different than windows which is my computer, so in part of the code the directory appears to be off because of that. Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:
Here's a screenshot showing the Node.js, the file folder, and the webpack.config.js code:
I noticed that the directory in the example had had '/static/js/index.jsx', but my directory uses the other slash \static\js\index.jsx and the error shows the odd combining as C:\Users...\static/static/js/index.jsx. After learning that \ was an escape code in javascript, I eventually tried the code re-done with the changed slashes.
Here's another screenshot showing the newly run effect ... and it didn't appear to have an effect.
So I'm not sure if what I "fixed" was also an error, but not the current one since it doesn't make sense to me how directory slashes can change... but still no real answers and my knowledge on this was too thin to effectively look it up or learn the nature of the issue.
I have a feeling the actual module either is or may also have some kind of error in the webpack code, but I'm not too sure.
Thanks for any and all time on helping me out,
Matt
Edit: the original post had screenshots of the code and reference to the source material it was copied from, but for reference here are the code segments:
The directory layout is:
| Documents
|--- Python Scripts
|--- fullstacktemplate
|--- fullstack_template
|--- static
|--- js
|--- index.jsx
| node_modules
| index.html
| package.json
| package-lock.json
| webpack.config.js
The node_modules and package-lock.json were auto-created with set up of NPM, Webpack, and/or Babel. Package.json was further edited which will be listed below.
index.jsx is 1 line:
alert("Hello World!");
package.json is as follows:
{
"name": "fullstacktemplate",
"version": "1.0.0",
"description": "fullstack template that will say hello in another language when activated",
"main": "index.jsx",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"keywords": [
"python",
"react",
"npm",
"webpack"
],
"author": "Matt Lane",
"license": "ISC",
"devDependencies": {
"webpack": "^4.28.2"
}
}
webpack.config.js is as follows:
const webpack = require('webpack');
const config = {
entry: __dirname + '\\js\\index.jsx',
output: {
path: __dirname + '\\dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
module.exports = config;
The webpack.config.js file is my "corrected" one with the \ slashes. The original unedited version was:
const webpack = require('webpack');
const config = {
entry: __dirname + '/js/index.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};
module.exports = config;
I am trying to delete a folder on post compile but cant make rd or del commands to work. Is there a way to delete a folder and subfolders from the scripts events?
Put the commands that you need in a batch or shell file and invoke that file in the post compile step
Use npm and gulp task, that not depends on the OS
Add a package.json file in your project root with gulp and gulp-rimraf dependencies:
{
"version": "1.0.0",
"description": "your description",
"name": "your project name",
"readme": "yuour readme",
"license": "Apache-2.0",
"dependencies": {
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-rimraf": "0.2.0",
},
"scripts": {
"gulp": "gulp",
}
}
Add a gulpfile.js in your project root containing the cleanup task :
/// <binding Clean='clean' />
"use strict";
var gulp = require("gulp"),
rimraf = require("gulp-rimraf");
gulp.task("clean:js", function (cb) {
return rimraf("path to js folder to delete", cb);
});
gulp.task("clean:css", function (cb) {
return rimraf("path to css folder to delete", cb);
});
gulp.task("default", ["clean:js", "clean:css"]);
In your project.json, call the npm script :
{
...
"scripts": {
"precompile": "npm run gulp" // this will call the default gulp task
},
}
For more information, you can read the doc about how to use gulp on the asp.net docs site
You can do the same using grunt instead of gulp if you want
I am new to Aurelia and falling at the first hurdle.
I have created a new project using the aurelia cli and have selected to use less.
This works fine until I try to use bootstrap. I have installed bootstrap with npm which appears in node_modules/bootstrap/
This has the directory structure
dist fonts grunt Gruntfile.js js less LICENSE package.json README.md
There are css files in the dist directory.
In my template I do
The error I get is
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
How do I tell Aurelia where the bootstrap css files are and how to use them ?
Thanks
I found out one simple thing. Every time you modify aurelia.json file, you need to terminate au run --watch task, a start it again, and it will just work.
I did not find this in documentation.
Hope this helps.
There is solution for bootstrap downloaded from npm:
app.html:
<require from="bootstrap/css/bootstrap.css"></require>
package.json you have to add:
"overrides": {
"npm:jquery#^3.0.0": {
"format": "amd"
}
}
aurelia.json (aurelia_project folder) you have to add at the end of "app-bundle.js" bundle:
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
It should look like this:
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
],
"dependencies": [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
},
It works for me.
We are still working on the CLI's ability to import libraries into a project and configure them correctly for bundling. Remember, it is an alpha. We will have major improvements coming for this in the future. In the mean time, remember that you can always use traditional techniques for including libraries if you aren't sure what to do. So, I would just include the style tag in your html page and a script tag as well, just pointing at the location for the files in your packages folder.
This is a major use case for us, we just haven't worked out all the library import capabilities yet. We will address this soon.
Using Aurelia CLI
First, install the following in your project:
au install jquery#2
au install bootstrap
Second, in aurelia.json add this line in bundles:vendor-bundle.js
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"resources": [
"css/bootstrap.css"
],
"exports": "$"
}
Then Add the following fonts after dependecies
"copyFiles": {
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
"node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}
Third, After setting import/install. Now you can reference it inside your app.html
<require from="bootstrap/css/bootstrap.css"></require>
Or simply add it as a globalResources inside main.ts
aurelia.use
.standardConfiguration()
.feature('resources')
.globalResources('bootstrap/css/bootstrap.css');
For more information on au install/import check it here or adding library in bundles.
I found that I had to change the boostrap css path in app.html to the one expected for Bootstrap 4, per a comment on Aurelia Discourse:
from this:
<require from="bootstrap/css/bootstrap.css"></require>
to this:
<require from="bootstrap/dist/css/bootstrap.css"></require>
If you are here in July 2019, the answer by #davidjmcclelland is what worked for me. After installing bootstrap, simple include require from=bootstrap/dist/css/bootstrap.css> in your app.html. No configurations required.