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
Related
Trying to deploy an Angular app to Heroku using Github, following the instructions on here: https://itnext.io/how-to-deploy-angular-application-to-heroku-1d56e09c5147
Deployment is successful, but when I open the app, I get a 'Not Found' error on the screen. Tried changing the location in 'app.use' and 'res.sendFile' a thousand times, but with no luck, for now this is my 'server.js' code:
These are my app.use and res.sendFile functions:
app.use(express.static(__dirname + '/dist/app_name'));
res.sendFile(path.join(__dirname + '/dist/app_name/index.html'));
Folder structure:
├── angular.json
├── browserslist
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── server.js
├── src
├── app
│ ├── assets
│ ├── environments
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json
My guess would be that my deployment can't locate my index.html in the src folder, but I haven't got any more ideas what path to provide..
Tried removing the '_dirname' in both functions, but still the same problem.
Would highly appreciate all the suggestions.
replace this:
app.use(express.static(__dirname + '/dist/app_name'));
res.sendFile(path.join(__dirname + '/dist/app_name/index.html'));
with:
app.use(express.static(path.join(__dirname, 'dist','app_name'));
res.sendFile(path.join(__dirname,'dist','app_name','index.html'));
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'm beginning with React, NodeJs and ExpressJs. I have seen many tutorials but I'm not sure of the correct way to start a project?
I have seen two ways. The first being express <project_name> and the second being npm init.
Which is correct and if there isn't a correct way then why would you initialize them differently when npm init includes express eventually (In the tutorials).
Thanks
npm init is good way to start, as you know it creates a package.json file in your project directory where you can store your project dependencies.
After this you must run the following commands:
npm install --save-dev webpack
npm install --save-dev babel
npm install --save-dev babel-loader
npm install babel-core
npm install babel-preset-env
npm install babel-preset-react
or as a single line command use this:
npm install --save-dev webpack babel babel-loader babel-core babel-preset-env babel-preset-react
first command will create a webpack.config.js file.
Second command will ready the babel to use in your project and the third to use babel-loader.
Now it's time to create project structure which looks like :
projectFolder/
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── README.md
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.png
This is the very basic project structure. It doesn't have server side structure.
full structure looks like:
react/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── docs
│ ├── data-fetching.md
│ ├── getting-started.md
│ ├── how-to-configure-text-editors.md
│ ├── react-style-guide.md
│ ├── README.md
│ └── recipes/
├── LICENSE.txt
├── node_modules/
├── package.json
├── README.md
├── src
│ ├── actions
│ ├── client.js
│ ├── components
│ │ ├── App
│ │ │ ├── App.js
│ │ │ ├── App.scss
│ │ │ ├── package.json
│ │ │ └── __tests__
│ │ │ └── App-test.js
│ │ ├── ContentPage
│ │ │ ├── ContentPage.js
│ │ │ ├── ContentPage.scss
│ │ │ └── package.json
│ │ ├── ErrorPage
│ │ │ ├── ErrorPage.js
│ │ │ ├── ErrorPage.scss
│ │ │ └── package.json
│ │ ├── Feedback
│ │ │ ├── Feedback.js
│ │ │ ├── Feedback.scss
│ │ │ └── package.json
│ │ ├── Footer
│ │ │ ├── Footer.js
│ │ │ ├── Footer.scss
│ │ │ └── package.json
│ │ ├── Header
│ │ │ ├── Header.js
│ │ │ ├── Header.scss
│ │ │ ├── logo-small#2x.png
│ │ │ ├── logo-small.png
│ │ │ └── package.json
│ │ ├── Link
│ │ │ ├── Link.js
│ │ │ └── package.json
│ │ ├── Navigation
│ │ │ ├── Navigation.js
│ │ │ ├── Navigation.scss
│ │ │ └── package.json
│ │ ├── NotFoundPage
│ │ │ ├── NotFoundPage.js
│ │ │ ├── NotFoundPage.scss
│ │ │ └── package.json
│ │ ├── TextBox
│ │ │ ├── package.json
│ │ │ ├── TextBox.js
│ │ │ └── TextBox.scss
│ │ ├── variables.scss
│ │ └── withViewport.js
│ ├── config.js
│ ├── constants
│ │ └── ActionTypes.js
│ ├── content
│ │ ├── about.jade
│ │ ├── index.jade
│ │ └── privacy.jade
│ ├── core
│ │ ├── db.js
│ │ ├── DOMUtils.js
│ │ ├── fetch
│ │ │ ├── fetch.client.js
│ │ │ ├── fetch.server.js
│ │ │ └── package.json
│ │ ├── Location.js
│ │ └── passport.js
│ ├── data
│ │ ├── queries
│ │ │ ├── content.js
│ │ │ ├── me.js
│ │ │ └── news.js
│ │ ├── schema.js
│ │ └── types
│ │ ├── ContentType.js
│ │ ├── NewsItemType.js
│ │ └── UserType.js
│ ├── public
│ │ ├── apple-touch-icon.png
│ │ ├── browserconfig.xml
│ │ ├── crossdomain.xml
│ │ ├── favicon.ico
│ │ ├── humans.txt
│ │ ├── robots.txt
│ │ ├── tile.png
│ │ └── tile-wide.png
│ ├── routes
│ │ ├── contact
│ │ │ ├── Contact.js
│ │ │ ├── Contact.scss
│ │ │ └── index.js
│ │ ├── home
│ │ │ ├── Home.js
│ │ │ ├── Home.scss
│ │ │ └── index.js
│ │ ├── login
│ │ │ ├── index.js
│ │ │ ├── Login.js
│ │ │ └── Login.scss
│ │ └── register
│ │ ├── index.js
│ │ ├── Register.js
│ │ └── Register.scss
│ ├── routes.js
│ ├── server.js
│ ├── stores
│ └── views
│ ├── error.jade
│ └── index.jade
├── test
│ └── stubs
│ └── SCSSStub.js
└── tools
├── build.js
├── bundle.js
├── clean.js
├── copy.js
├── deploy.js
├── lib
│ ├── fetch.js
│ └── fs.js
├── README.md
├── run.js
├── runServer.js
├── start.js
└── webpack.config.js
Created using yeoman generator-react-fullstack
Alternatively you can do all this stuff by simply using yeoman react generator but be careful with generators, they sometimes toughen your deployment process.
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">