for special Heroku purposes, I need to deploy the solution which would redirect all routes to create-react-app index.html.
$ tree -L 2 -I 'node_modules|temp|semantic|build'
.
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ ├── index.html // all requests from "redirect" express app should point to this file
│ ├── libs
│ ├── manifest.json
│ └── semantic.css
├── README.md
├── redirect // express app
│ ├── app.js
│ ├── bin
│ ├── package.json
│ ├── public
│ ├── views
│ └── yarn.lock
├── semantic.json
├── src
│ ├── appConfig.js
│ ├── assets
│ ├── components
│ ├── index.js
│ ├── index.scss
│ ├── old
│ ├── pages
│ ├── serviceWorker.js
│ └── utils
├── yarn.lock
└── yarn-error.log
the redirect directory contains the express app where I need to redirect every request to index.html
everything is fine but in the index.html there is env variable %PUBLIC_URL% which would fail with error below when I run npm start from redirect folder
pandemic#bar ~/foo/redirect
$ npm start
> redirect#0.0.0 start <path>\redirect
> node ./bin/www
URIError: Failed to decode param '/%PUBLIC_URL%/libs/pdfmake/pdfmake.min.js'
How to resolve this issue?
note: I am using windows
Problem:
Package Now-UI-kit folder is deleted as soon as I run 'npm install' or if I install a package via 'npm install [package name]'
I have a development environment with a build tool for the development of my site. The environment has the Bootstrap framework and a lay-out kit: Now-UI-Kit. This is a template I bought. Based on the documentation of Now-UI-kit I have to run 'npm install' from the folder where the kit is installed. One folder up is node_modules. Below a tree, seen from the node_modules folder:
➜ node_modules git:(master) ✗ tree -L 2
.
├── bootstrap
│ ├── LICENSE
│ ├── README.md
│ ├── dist
│ ├── js
│ ├── package.json
│ └── scss
├── cookies-eu-banner
│ ├── Gulpfile.js
│ ├── LICENSE
│ ├── README.md
│ ├── bower.json
│ ├── css
│ ├── demo
│ ├── dist
│ ├── package-lock.json
│ ├── package.json
│ └── src
├── dyscrollupjs
│ ├── Gruntfile.js
│ ├── LICENSE
│ ├── README.md
│ ├── dist
│ ├── index.html
│ ├── package.json
│ ├── src
│ └── tsconfig.json
├── jquery
│ ├── AUTHORS.txt
│ ├── LICENSE.txt
│ ├── README.md
│ ├── bower.json
│ ├── dist
│ ├── external
│ ├── package.json
│ └── src
├── jquery_lazyscript
│ ├── jquery.lazyscript.js
│ ├── jquery.lazyscript.js.map
│ ├── jquery.lazyscript.min\ kopie.js
│ ├── jquery.lazyscript.min.js
│ └── jquery.lazyscript.min.js.map
├── now-ui-kit-pro
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── assets
│ ├── docs
│ ├── examples
│ ├── gulpfile.js
│ ├── index.html
│ ├── node_modules
│ ├── nucleo-icons.html
│ ├── package-lock.json
│ ├── package.json
│ ├── presentation.html
│ └── sections.html
├── popper.js
│ ├── README.md
│ ├── dist
│ ├── index.d.ts
│ ├── index.js.flow
│ └── package.json
├── rellax
│ ├── LICENSE
│ ├── README.md
│ ├── bower.json
│ ├── css
│ ├── demo.html
│ ├── package.json
│ ├── rellax.js
│ ├── rellax.min.js
│ └── tests
├── resize_header
│ └── resize_header_logo.js
├── scripts
│ ├── jquery.lazyscript.min.js
│ ├── lazyload.js
│ └── rellax_parameters.js
└── social
├── changed\ -\ social.js
├── defer.js
└── social.js
The latest version of the Now-UI-kit I downloaded from the builder is v 1.2.2 and the latest version on npm is v1.1.0 enter link description here
A snippet from the package json in the src-folder (one folder higher than node_modules)
"dependencies": {
"bootstrap": "^4.2.1",
"cookies-eu-banner": "^1.2.14",
"dyscrollupjs": "^2.0.0",
"jquery": "^3.3.1",
"now-ui-kit-pro": "^1.2.2",
"popper.js": "^1.14.6",
"rellax": "^1.7.2"
},
The package json from the Now-UI-kit contains:
{
"name": "now-ui-kit-pro",
"description": "Premium Bootstrap 4 Now UI Design",
"version": "1.2.2",
"homepage": "http://creative-tim.com/product/now-ui-kit-pro",
"author": "Creative Tim",
"license": "Creative Tim License <www.creative-tim.com/license>",
"devDependencies": {
"gulp": "^4.0.0",
"gulp-autoprefixer": "^5.0.0",
"gulp-clean": "^0.4.0",
"gulp-install": "^1.1.0",
"gulp-open": "^3.0.1",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4"
}
}
Constantly restoring the backup of the Now-UI-kit folder is quit cumbersome and is error sensitive. I recently started with using package, and for this problem, I'd like to understand how I kan solve the problem. I did do a search on Stackoverflow and found some suggestions which I did try, but no luck yet.
Thanks in advance for your time.
I'd like to use NPM to deploy my NodeJS + ExpressJS websites (API rest + front).
What i'm doing for now :
I setup a private NPM repository
I push my software as a NPM package to this repository
I do npm install mysoftware
Now, the problem, I have to do : node node_modules/mysoftware/bin.js
After step 4. I have the following file tree :
.
└── node_modules
├── my-software
│ ├── bin.js
│ ├── package.json
│ └── src
├── some-required-module
│ ├── HISTORY.md
│ ├── index.js
│ ├── LICENSE
│ ├── package.json
│ └── README.md
I don't like this file tree because everything is a the same level : my software and its dependancies, it makes it very messy.
I'd like it to be this way :
my-software
├── bin.js
├── package.json
├── src
└── node_modules
├── some-required-module
│ ├── HISTORY.md
│ ├── index.js
│ ├── LICENSE
│ ├── package.json
│ └── README.md
Is there a way to install an npm package as a project, and therefore have the file tree I'd like ?
I've Googled around and searched Stack Overflow but I can't find an answer that has helped me unfortunately.
I have a small Node project with the following layout:
├── app
│ ├── config
│ │ ├── env
│ │ │ ├── development.js
│ │ │ └── production.js
│ │ ├── express.js
│ │ └── index.js
│ ├── controllers
│ │ ├── home.js
│ │ ├── index.js
│ │ ├── metric.js
│ │ ├── metricList.js
│ │ └── metrics
│ │ ├── file2.js
│ │ ├── file3
│ │ ├── file4.js
│ │ ├── file5.js
│ │ ├── file6
│ │ ├── index.js
│ │ └── points.js
│ ├── data
│ │ └── premierLeague
│ │ └── 2015-16.json
│ ├── public
│ │ └── main.css
│ │ └── bower_components
│ ├── routes.js
│ ├── server.js
│ └── views
│ ├── home.handlebars
│ ├── layouts
│ │ └── main.handlebars
│ ├── metric.handlebars
│ └── metricList.handlebars
├── bower.json
├── jsonScript.js
├── npm-debug.log
├── package.json
└── server.js
Bootstrap is located in the bower_components folder under public.
In my app/views/layouts/main.handlebars file I require the bootstrap CSS file using the following script tag:
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
In my app/config/express.js file (which does a lot of the work of getting the app going), I have this line:
app.use(express.static('./public'));
Unfortunately I always see this error in the Chrome console when I host up my app:
http://localhost:8080/bower_components/bootstrap/dist/css/bootstrap.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
I'd be really grateful if someone could advise me how to either host my bower_components properly using Express or link to it successfully from my main layout. This is driving me mad, I've tried countless combinations and it never seems to work! Many thanks
Try to get the right path:
app.use(express.static(__dirname + '../public'));
The __dirname get the local directory.
And:
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
I'd still like to try to get an example running w/ Yeoman and Express.
I tried the following and it worked "okay", but I'm stuck merging the routes. (over simplified for readability)
mkdir test
cd test
express
mkdir app
cd app
mkdir js
cd js
yeoman angular
Then I changed "output:dist" to "output:../../public" in the Gruntfile.js
Now, both servers run okay on their own (e.g. yeoman server and node app.js). I can also run 'yeoman build' now to output the minified JS to /public in the express app.
I'm a bit fuzzy on how the routes might merge? I would like / to pull up the Angular route and not the express route, etc. The angular-express-seed examples on github look okay, but I would still like Yeoman integrated into the project.
Any suggestions would be appreciated.
I would recommend this structure for yeoman + expressjs:
mkdir app
cd app
yeoman angular
express .
So your dir tree should look like this:
.
├── app
│ ├── 404.html
│ ├── favicon.ico
│ ├── index.html
│ ├── robots.txt
│ ├── scripts
│ │ ├── controllers
│ │ │ └── main.js
│ │ ├── vendor
│ │ │ ├── angular.js
│ │ │ ├── angular.min.js
│ │ │ ├── es5-shim.min.js
│ │ │ └── json3.min.js
│ │ └── yeoman-test.js
│ ├── styles
│ │ └── main.css
│ └── views
│ └── main.html
├── app.js
├── Gruntfile.js
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── user.js
├── test
│ ├── lib
│ │ └── angular-mocks.js
│ └── spec
│ └── controllers
│ └── main.js
├── testacular.conf.js
└── views
├── index.jade
└── layout.jade
You can remove the now redundant public directory (we're going to serve from app instead):
rm -rf public
And now in app.js, you need to change which dir to serve static files from. Change this line:
app.use(express.static(path.join(__dirname, 'public')));
to this:
app.use(express.static(path.join(__dirname, 'app')));
And that should be about it. There's one careat in that you now have two "index" files -- one in views/index.jade, and the other in app/index.html. Removing the app/index.html currently breaks yeoman, so my advice is to get rid of the route for app/index.jade and just make edits to index.html.
Hope this helps!
Here is another slightly different setup
yo angular
update Gruntfile.js to change config from 'app' to 'public'.
then do
express .
open app.js and ensure there is no route mapping like this app.get('/', routes.index);
This is so node server would actually serve up index.html, the same file that loads up when running "grunt server".
Now go ahead and delete public directory and then move app directory to public
rm -rf public
mv app public
This project seems to cover all of the requirements (and even has optional support for MongoDB): https://github.com/DaftMonk/generator-angular-fullstack
I've just tried it locally and it works:
npm install -g generator-angular-fullstack
yo angular-fullstack [appname]
See the GitHub page for more info.
I would comment on #btford 's answer if I had the reputation -
Just wanted to add that installing express . after yo angular will overwrite the grunt-created package.json file which will break grunt as #jjperezaguinaga reported.
Make sure to save a copy of package.json before installing express .. Then add the following dependencies to the original package.json:
"dependencies" : {
"express": "3.3.4",
"jade": "*"
}
I'm having troubles with this solution:
express still try to load index.jade instead of index.html, but if I enter localhost:3000/index.html express render correctly.
I solved removing this line from app.js:
//app.get('/', routes.index);
Hope this helps. Thanks for sharing,
D.
Here's a compilation of steps others have suggested previously, but all in one, in numbered steps. This is based on versions: Yeoman 1.0.4 & Express 3.3.8.
1) Create your project directory and cd into it
2) Install angular:
yo angular
(will need to run the next two lines if you're not logged in as su)
bower install
sudo npm install
3) Rename package.json to package_yo.json
(so it's not overwritten by express' version of package.json)
4) Install Express
express -c less -Hs .
(or whatever other express options you desire)
sudo npm install
5) Delete Express' public directory & change 'public' to 'app' for paths in Express' app.js:
app.use(require('less-middleware')({ src: _dirname + '/app' }));
app.use(express.static(path.join(_dirname, 'app')));
6) Delete express' default route ( app.get('/', routes.index); )
(now express will use the routes specified in angular's /app folder instead
7) Start the server
npm start
(Then you should see Yeoman's welcome page at: localhost:3000/)