Do you need help making a 404 page? You can use this with express and with my answer on the bottom.
(if you have a working package.json and you are using express, you can simply just skip this step.)
Add this first to package.json:
{
"name": " text ",
"version": "0.0.1",
"description": " text ",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.16.4"
},
"engines": {
"node": "8.x"
},
"license": "MIT",
"keywords": [
"node",
"glitch",
"express"
]
}
then look at the answer below
Use this:
app.get('*', function(req, res){
res.sendFile(__dirname + '/views/404.html');
});
Also make sure to make a 404.html page in the views/ folder on glitch. Or, if you want remove the /views/404.html and replace it with /404.html.
View the demo. Make any random text on the end of the url.
Related
I'm using NX to manage a React design system mono-repo. I want to create my components within an NX Library and am currently looking into creating a Node package which will run the CSS for each component through PostCSS to get it production ready.
I've tested my PostCSS Node package in isolation and I know it's doing what I need it to to the files, however I'm having trouble working out how to configure the NX repo to run an NPM script in each component's package.json. A component such as my Button component has a package.json like so:
{
"name": "css-components-button",
"version": "0.1.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"prepack": "tools-postcss 'lib/**/*.css' dist/"
},
"dependencies": {
"tools-postcss": "file:.yalc/tools-postcss"
}
}
In the CSS Components Library the project.json file looks like this:
{
"name": "css-components",
"sourceRoot": "libs/css-components/src",
"projectType": "library",
"tags": [],
"targets": {
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/css-components/**/*.{ts,tsx,js,jsx}"]
}
},
"build": {
"executor": "#nrwl/rollup:rollup",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/libs/css-components",
"tsConfig": "libs/css-components/tsconfig.lib.json",
"project": "libs/css-components/package.json",
"entryFile": "libs/css-components/src/index.ts",
"external": ["react/jsx-runtime"],
"rollupConfig": "#nrwl/react/plugins/bundle-rollup",
"compiler": "babel",
"assets": [
{
"glob": "libs/css-components/README.md",
"input": ".",
"output": "."
}
]
}
},
"test": {
"executor": "#nrwl/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "libs/css-components/jest.config.ts",
"passWithNoTests": true
}
},
"prepack": {
"executor": "#nrwl/workspace:run-script",
"options": {
"script": "prepack"
}
}
}
}
In particular I've added a "prepack" custom target which I'm trying to use to run a "prepack" NPM script in each component's package.json. Currently when I run nx run css-components:prepack in the Terminal I get **error Command "prepack" not found.**
Would really appreciate some help with this. Any ideas?
I'm following a tutorial for how to set up Codemirror with react. I download the package with - npm install #uiw/react-codemirror
This works, as it allows me to:
import CodeMirror from "#uiw/react-codemirror"
When I try to import themes or keymaps, however, I'm given an error:
Module not found: Error: Package path ./theme/monokai.css is not exported from package path/to/node_modules/codemirror
import "codemirror/theme/monokai.css"
Both #codemirror and codemirror are available in node_modules, however codemirror doesn't contain a themes directory.
The package.json for the codemirror directory:
{
"name": "codemirror",
"version": "6.0.1",
"description": "Basic configuration for the CodeMirror code editor",
"scripts": {
"test": "cm-runtests",
"prepare": "cm-buildhelper src/codemirror.ts"
},
"keywords": [
"editor",
"code"
],
"author": {
"name": "Marijn Haverbeke",
"email": "marijnh#gmail.com",
"url": "http://marijnhaverbeke.nl"
},
"type": "module",
"main": "dist/index.cjs",
"exports": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"types": "dist/index.d.ts",
"module": "dist/index.js",
"sideEffects": false,
"license": "MIT",
"dependencies": {
"#codemirror/autocomplete": "^6.0.0",
"#codemirror/commands": "^6.0.0",
"#codemirror/language": "^6.0.0",
"#codemirror/lint": "^6.0.0",
"#codemirror/search": "^6.0.0",
"#codemirror/state": "^6.0.0",
"#codemirror/view": "^6.0.0"
},
"devDependencies": {
"#codemirror/buildhelper": "^0.1.5"
},
"repository": {
"type": "git",
"url": "https://github.com/codemirror/basic-setup.git"
}
}
Would be thankful for any ideas as to why I'm getting this error. I've tried uninstalling codemirror and downloading it again, however the error persists.
I switched to a version of react-codemirror that downloads codemirror: 5.x and it works now
You might want to use theme doc, and doc
I'm working with preact for the first time and am trying to render JSX code in express server.
I understand that express doesn't understand JSX syntax and requires babel.
I've installed babel and transform-react-jsx but I still get the undefined error.
Error:
/Users/akarpov/Downloads/test_preact_node/app.js:9
<div class="fox">
^
SyntaxError: Unexpected token <
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": ["transform-react-jsx"]
}
package.json
{
"name": "test_preact_node",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"#babel/core": "^7.17.10",
"#babel/node": "^7.17.10",
"#babel/preset-env": "^7.17.10",
"body-parser": "^1.20.0",
"cors": "^2.8.5",
"express": "^4.18.1",
"nodemon": "^2.0.16",
"preact": "^10.7.1",
"preact-render-to-string": "^5.2.0"
},
"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel app.js",
"start": "npm run build && nodemon — exec babel-node app.js"
},
"author": "",
"license": "ISC"
}
app.js
const express = require("express");
const { h } = require("preact");
const render = require("preact-render-to-string");
/** #jsx h */
// silly example component:
const Fox = ({ name }) => (
<div class="fox">
<h5>{name}</h5>
<p>This page is all about {name}.</p>
</div>
);
const app = express();
app.listen(3200);
// on each request, render and return a component:
app.get("/:fox", (req, res) => {
let html = render(<Fox name={req.params.fox} />);
// send it back wrapped up as an HTML5 document:
res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});
A couple issues:
The flag is --exec, not - exec.
You need quotes around your command, i.e, 'babel-node app.js'
-"start": "npm run build && nodemon — exec babel-node app.js"
+"start": "nodemon --exec 'babel-node app.js'"
Not sure why you're running Babel over your project once, and then using babel-node right afterwards. Might've been just something you did while debugging? Either way, not needed.
I have created a simple CLI to bootstrap projects with inquirer and have successfully published it to NPM. However, when installing it with
npm i -g noobject
it's successfully loading and installing.
When running
noobject
in the cmd line, it does return "command not found" and when running
npx noobject its returning the following.
npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Me\AppData\Local\npm-cache\_logs\2022-02-13T17_28_00_374Z-debug-0.log
I have tried it both on windows 10 and linux ubuntu 20.4.
Here is my index.js: https://sourceb.in/ZGZMWKU8tb
#! /usr/bin/env node
const inquirer = require("inquirer");
const fs = require("fs");
// FULL SOURCE TREE: https://github.com/vKxni/noobject
const CURR_DIR = process.cwd();
const CHOICES = fs.readdirSync(`${__dirname}/templates`);
// Questions asked to the User
const QUESTIONS = [
{
name: "project-choice",
type: "list",
message: "What project would you like to generate?",
choices: CHOICES,
},
{
name: "project-name",
type: "input",
message: "Project name:",
validate: (input) => {
if (/^([A-Za-z\-\_\d])+$/.test(input)) return true;
else
return "Project name may only include letters, numbers, underscores and hashes.";
},
},
];
// Send a prompt to choose a template
inquirer.prompt(QUESTIONS).then((answers) => {
const projectChoice = answers["project-choice"];
const projectName = answers["project-name"];
const templatePath = `${__dirname}/templates/${projectChoice}`;
// Create the folder with the project name choosed by the user
fs.mkdirSync(`${CURR_DIR}/${projectName}`);
createDirectoryContents(templatePath, projectName);
console.log(`✅ Successfully created ${projectName}`);
});
const createDirectoryContents = (templatePath, newProjectPath) => {
const filesToCreate = fs.readdirSync(templatePath);
filesToCreate.forEach((file) => {
const origFilePath = `${templatePath}/${file}`;
const stats = fs.statSync(origFilePath);
if (stats.isFile()) {
const contents = fs.readFileSync(origFilePath, "utf8");
if (file === ".npmignore") file = ".gitignore";
const writePath = `${CURR_DIR}/${newProjectPath}/${file}`;
fs.writeFileSync(writePath, contents, "utf8");
console.log(`⚠️ Created ${writePath}`);
} else if (stats.isDirectory()) {
fs.mkdirSync(`${CURR_DIR}/${newProjectPath}/${file}`);
createDirectoryContents(
`${templatePath}/${file}`,
`${newProjectPath}/${file}`
);
}
});
};
Here is my package.json:
{
"name": "noobject",
"version": "1.2.8",
"description": "Project generator written in NodeJS",
"main": "index.js",
"scripts": {
"noobject": "node index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vKxni/noobject.git",
"keywords": [
"node",
"generator",
"project",
"noobject"
],
"author": "vKxni",
"license": "ISC",
"dependencies": {
"inquirer": "^8.2.0"
},
"bin": {
"noobject": "index.js"
}
}
}
(As a pastebin: https://sourceb.in/CF4ydtNccG).
I hope anyone can help me so I can bootstrap projects and config files easier and faster.
Your problem is that you're missing a } for repository, so bin is actually inside repository. You can see there's a doubled } in the second to last line.
{
"name": "noobject",
"version": "1.2.8",
"description": "Project generator written in NodeJS",
"main": "index.js",
"scripts": {
"noobject": "node index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vKxni/noobject.git",
/* <----- should be here */
"keywords": [
"node",
"generator",
"project",
"noobject"
],
"author": "vKxni",
"license": "ISC",
"dependencies": {
"inquirer": "^8.2.0"
},
"bin": {
"noobject": "index.js"
}
} /* <----- wrong place! */
}
If you fix that, it works:
{
"name": "noobject",
"version": "1.2.8",
"description": "Project generator written in NodeJS",
"main": "index.js",
"scripts": {
"noobject": "node index.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/vKxni/noobject.git",
},
"keywords": [
"node",
"generator",
"project",
"noobject"
],
"author": "vKxni",
"license": "ISC",
"dependencies": {
"inquirer": "^8.2.0"
},
"bin": {
"noobject": "index.js"
}
}
I am a beginner, just started to learn express and webpack, I tried to use the initial express file
Trying to use webpack for packaging, I keep getting errors
The reason for this is because I want to run my system in a non-node.js environment
Is my direction wrong?
The express project is create with express --view=ejs myapp
I didn't make any changes
webpack.config.js
const path = require('path');
const clientConfig = {
resolve: {
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
entry: {
'index': './app.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
}
}
module.exports = [clientConfig];
package.json
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"webpack": "webpack"
},
"browser": {
"crypto": false
},
"dependencies": {
"cookie-parser": "~1.4.4",
"crypto-browserify": "^3.12.0",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"path": "^0.12.7",
"twig": "~0.10.3"
},
"main": "app.js",
"devDependencies": {
"webpack": "^5.26.3",
"webpack-cli": "^4.5.0"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
Thanks for any guidance and comments
You can't run Express in a non-nodejs environment. Express depends upon the nodejs run-time library such as the http module so it can't run without that library. webpack can't overcome that.
You can use webpack to build either plain Javascript with no external dependencies or with dependencies that you have independent libraries for that can be included in the webpack bundle or with dependences that are present in whatever environment you want to run it in.