I'm exploring Node website with some templating engine, Jade.
But, some of my page error at allocating resource.
My folder hierarchy
base-project
| public
| | css
| | | style.css
| view
| | dynamic.jade
| | landing.jade
While router.get('/landing') linking resource to the right path: base-url/css/style.js, router.get('/user/dynamic') linking resource to wrong path: base-url/user/css/style.js.
I've used app.use(express.static(path.join(__dirname, 'public'))); in my root app.js.
Is there something wrong?
Related
I have two projects in my application:
App/AppServer
libraries/domain
Below is the folder structure:
+---apps
| \---AppServer
| +---config
| +---node_modules
| +---src
| | +---auth
| | | \---dto
| | +---config
| | +---masterDataHttp
| | \---tasks
| | +---dto
| | \---pipes
| \---test
+---libraries
| \---domain
| +---node_modules
| \---src
| \---masterData
\---node_modules
I have some entities defined under libraries\domain\src\masterData and a few entities under apps\AppServer\src\tasks.
My ormconfig is defined under apps\AppServer\src\config. It imports the entities using
__dirname + '/../**/*.entity.{js,ts}'
Using above we can import entities under apps\AppServer\src. But I am trying to figure out what best approach to import entities defined under libraries\domain\src.
One option is import entities directly using
import { Entity1, Entity2 } from '#myproj/domain'
What is the recommended practice/approach to address this? TIA
Importing the entities directly
entities: [__dirname + '/../**/*.entity.{js,ts}', Entity1, Entity2]
Or you could wrap all of the entities of the library in a variable:
// libraries/domain
export const entities = [Entity1, Entity2];
// importing the entities
import { entities } from '#myproj/domain' ;
...
entities: [__dirname + '/../**/*.entity.{js,ts}', ...entities]
Importing the entities with path string as you already do
entities: [
__dirname + '/../**/*.entity.{js,ts}',
'src/libraries/domain/**/*.entity.{js,ts}'
]
This will just work.
I have a private made npm package that has a symbol # I'd like to use as an alias to use in my current project. Is this possible?
Example:
project structure
|-node_modules
|
|-#package_name
|
|-packagefile.js
|-src
|
|-srcfile.js
|
|-webpack.config.js
Now in:
packagefile.js
const v = require('#/srcfile.js')
Can webpack create an alias with the symbol # to lead to the src directory? I have functionality in this package I want to interact with my current project.
In my webpack.config I have:
module.exports = {
...
resolve: {
alias: {
'#': path.resolve(__dirname,'./src'),
}
}
...
}
Which doesn't seem to work.
I think your webpack config is effective for the root folder, not for node_module.
So I guess, The Package should have it own webpack config
like this
|-node_modules
|
|-#package_name
|
|-packagefile.js
|-webpack.config.js
|-src
|
|-srcfile.js
|
|-webpack.config.js
I have created my first react app using npx create-react-app my-app and started it. Now I want to add express into this react app. Hence I have added the below line in my index.js
var express = require('express')
Here is what my whole index.js looks like. The above is the only line that I have added, rest is exactly same as what I got from create-react-app
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
var express = require('express')
// const helmet = require('helmet')
// const app = express()
// app.use(helmet())
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
The error that I'm getting is TypeError: Unable to get property 'prototype' of undefined or null reference. The below is the full stacktrace of the error that I'm seeing in browser. And please note that there are no compilation issues.
×
TypeError: Unable to get property 'prototype' of undefined or null reference
Anonymous function
mylocaldrivepath/react/my-app/node_modules/express/lib/response.js:58
55 | */
56 |
57 |
> 58 | var res = Object.create(http.ServerResponse.prototype);
59 | /**
60 | * Module exports.
61 | * #public
View compiled
./node_modules/express/lib/response.js
mylocaldrivepath/react/my-app/node_modules/express/lib/response.js:1
> 1 | /*!
2 | * express
3 | * Copyright(c) 2009-2013 TJ Holowaychuk
4 | * Copyright(c) 2014-2015 Douglas Christopher Wilson
View compiled
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/express/lib/express.js
mylocaldrivepath/react/my-app/node_modules/express/lib/express.js:27
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./node_modules/express/index.js
mylocaldrivepath/react/my-app/node_modules/express/index.js:10
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
./src/index.js
mylocaldrivepath/react/my-app/src/index.js:8
5 | import * as serviceWorker from './serviceWorker';
6 |
7 |
> 8 | var express = require('express')
9 | // const helmet = require('helmet')
10 |
11 | // const app = express()
View compiled
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
mylocaldrivepath/react/my-app/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^
151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
0
http://localhost:3000/static/js/main.chunk.js:388:1
__webpack_require__
mylocaldrivepath/react/my-app/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^
786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
mylocaldrivepath/react/my-app/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^
46 | }
47 | }
48 |
View compiled
webpackJsonpCallback
mylocaldrivepath/react/my-app/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^
33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
Global code
http://localhost:3000/static/js/main.chunk.js:1:2
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
Any help on fixing this issue is greatly appreciated !
Typically express is placed outside of the src folder to serve your compiled client-side code; meanwhile, webpack-dev-server creates a development server and compiles code on the fly; so in this case, since you're using the create-react-app and not utilizing server-side rendering, then you don't need express (for development).
Instead, once you've compiled your code for production (via npm run build), you'll need some way to serve the assets. Typically, you'll have an app.js file that sits outside of the src folder and that will serve your compiled production folder (dist or build):
const { resolve } = require("path");
const express = require("express");
const app = express();
const currentDirectory = process.cwd(); // current directory
app.use(express.static("dist")); // express will serve up production assets
app.get("*", (req, res) =>
res.sendFile(resolve(`${currentDirectory}/dist/index.html`))
); // express will serve up the front-end index.html file if it doesn't recognize the route
app.listen(8080, err => {
if (!err) {
console.log(`\nYour application is running on port 8080}\n`);
} else {
console.err(`\nUnable to start server: ${err}`);
}
});
For example:
├── dist
| ├── css
| | ├── main.[contenthash:8].css
| | └── main.[contenthash:8].css.map
| ├── js
| | ├── main.[hash].js
| | └── main.[hash].js.map
| ├── media
| | └── [hash].[ext]
| └── favicon.ico
| └── index.html
|
├── public
| ├── favicon.ico
| └── index.html
|
├── src
| ├── actions
| ├── components
| ├── containers
| ├── images
| ├── pages
| ├── reducers
| ├── root
| ├── routes
| ├── styles
| ├── types
| ├── utils
| └── index.js
|
└── app.js
I had the same problem and solved it!
I was using Express.js and Node.js for backend and React.js for frontend and upon compiling the frontend I would get the error TypeError: http.ServerResponse is undefined
I was using npx create-react-app for creating react frontend and as a result some of the files are not compiled properly. when I used create-react-app for creating react frontend it all got set!
So a better practice is to create your react app using create-react-app instead of using npx create-react-app
Hope this helps!
I'm using npm link to reference a typescript library I'm developing in my test project
Which means that my node_modules looks like this :
node_modules/
| myLib/
| | dist/
| | | subModule/
| | | | index.js
| | | | index.d.ts
| | | index.js
| | | index.d.ts
| | node_modules/
| | src/
| | tsconfig.json
| | package.json
Which implies that when I'm trying to reference my library using import X from "myLib" I have to tell the compiler that the sources are in the /dist forlder, not that the root of myLib.
I solved this by adding a "main": "./dist/index.js" in the package.json of myLib
The problem is when I try to import a path relative to myLib
Like import Y from "myLib/subModule"
This time it doesn't work.
Because instead of looking at node_modules/myLib/dist/subModule tsc is looking at node_modules/myLib/subModules/dist/ which doesn't exist.
How can I make the compiler to look at the right path for subModules ?
You can resolve this by using the "paths" key in the "compilerOptions" in your tsconfig.json. Something like this:
{
"compilerOptions": {
"paths": {
"myLib/*": "node_modules/myLib/dist/*"
}
}
}
Sadly, this is something of a standing issue with how the TypeScript compiler resolves definition files when you have a "types" key in your package.json.
Firstly, to be honest I'm pretty new to Puppet world. I'm trying to build a puppet script for my server.
Here's how my puppet structures looks like -
.
|-- environments
| `-- example_env
| |-- manifests
| |-- modules
| `-- README.environment
|-- manifests
| |-- node.pp
| `-- site.pp
|-- modules
| |-- nginx
| | `-- manifests
| | `-- nginx.pp
| |-- sudoers
| | |-- files
| | | `-- sudoers
| | `-- manifests
| | `-- sudoers.pp
| `-- users
| `-- manifests
| `-- users.pp
|-- puppet.conf
`-- templates
here how my node.pp and site.pp look like this.
# /etc/puppet/manifests/node.pp
node werain {
include sudoers
}
and
# etc/puppet/manifests/site.pp
import 'node.pp'
and finally my sudoers.pp file look like this.
# /etc/puppet/modules/sudoers/manifests/sudoers.pp
class sudoers {
file { '/etc/sudoers':
mode: '0400',
source: 'puppet:///modules/sudoers/sudoers',
owner: 'root',
group: 'root'
}
}
Any clue what I'm doing wrong.
I'm running the puppet command like this.
puppet apply /etc/puppet/manifests/site.pp --modulepath=/etc/puppet/modules/
my puppet version is 3.8.4
You have a module named sudoers, and in it a class with the same name. Puppet will look for the definition of that class in modules/sudoers/manifests/init.pp, but you have put it in modules/sudoers/manifests/sudoers.pp instead. That latter is where Puppet would look for a class named sudoers::sudoers.