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">
Related
I have the following problem:
I created a Django app (app1) and then installed it in other one (app2). Now I'm trying to make the internationalization of the site, but I want to be able to use the installed app translations and I cannot even compile them.
Some useful information:
APP 1
.
├── MANIFEST.in
├── app1
│ ├── admin.py
│ ├── apps.py
│ ├── forms.py
│ ├── __init__.py
│ ├── locale/
│ │ ├── en-us
│ │ │ └── LC_MESSAGES
│ │ │ └── django.po
│ │ ├── es
│ │ │ └── LC_MESSAGES
│ │ │ └── django.po
│ │ └── pr
│ │ └── LC_MESSAGES
│ │ └── django.po
│ ├── migrations/
│ ├── models.py
│ ├── settings.py
│ ├── static/
│ ├── templates
│ ├── tests.py
│ ├── urls.py
│ ├── utils.py
│ └── views.py
└── setup.py
APP 2 (the one that has APP 1 installed)
├── app2/
│ ├── locale/
│ │ ├── en-us/
│ │ │ └── LC_MESSAGES
│ │ │ ├── django.mo
│ │ │ └── django.po
│ │ ├── es/
│ │ │ └── LC_MESSAGES
│ │ │ ├── django.mo
│ │ │ └── django.po
│ │ └── pr/
│ │ └── LC_MESSAGES
│ │ ├── django.mo
│ │ └── django.po
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app1.apps.App1SiteConfig',
'app2.apps.App2SiteConfig',
]
LANGUAGE_CODE = 'es'
LANGUAGES = (
('en-us', _('English')),
('es', _('Spanish')),
('pt', _('Portuguese'))
)
LOCALE_PATHS = (
os.path.join(BASE_DIR, "app2", "locale"),
)
Basically, the desired TODOs are:
compile the .mo's from App1
use the App1 transalations (it has its own templates and models so ideally they would be used there)
What I don't want:
compile the App1 .mo's from django-admin of App2 and then translate it there.
Thanks in advance!
Well.. finally I managed to solve this by my way..
With the virtualenv activated I moved to App1 dir and executed django-admin compilemessages, the .mo's has been created in the right path (app1/locale/<lang>/LC_MESSAGES/django.mo) and they're able to be used from the site.
I downloaded mtd-utils 2.0 and I want to built it for specified deployment path. If I launch:
./configure --bindir .../mtd-utils-81049e5/deploy/usr/sbin
and then I do:
make
I will get output into folder, where I launched make. I want to have executable files somewhere like: bla/mtd-utils-2.0.../deploy/usr/sbin...
IIUC, you can do this like that:
./configure --prefix=/tmp/mtd-utils
make
make install
Finally, you get this:
$ tree /tmp/mtd-utils
/tmp/mtd-utils
├── sbin
│ ├── doc_loadbios
│ ├── docfdisk
│ ├── flash_erase
│ ├── flash_eraseall
│ ├── flash_lock
│ ├── flash_otp_dump
│ ├── flash_otp_info
│ ├── flash_otp_lock
│ ├── flash_otp_write
│ ├── flash_unlock
│ ├── flashcp
│ ├── ftl_check
│ ├── ftl_format
│ ├── jffs2dump
│ ├── jffs2reader
│ ├── mkfs.jffs2
│ ├── mkfs.ubifs
│ ├── mtd_debug
│ ├── mtdinfo
│ ├── mtdpart
│ ├── nanddump
│ ├── nandtest
│ ├── nandwrite
│ ├── nftl_format
│ ├── nftldump
│ ├── recv_image
│ ├── rfddump
│ ├── rfdformat
│ ├── serve_image
│ ├── sumtool
│ ├── ubiattach
│ ├── ubiblock
│ ├── ubicrc32
│ ├── ubidetach
│ ├── ubiformat
│ ├── ubimkvol
│ ├── ubinfo
│ ├── ubinize
│ ├── ubirename
│ ├── ubirmvol
│ ├── ubirsvol
│ └── ubiupdatevol
└── share
└── man
├── man1
│ └── mkfs.jffs2.1
└── man8
└── ubinize.8
5 directories, 44 files
Goal
I have 3 instances in my dockercompose.yml , I can only start 2 of my instances, and have a hard time starting my third one which my node express.
Project directory
.
├── Icon\r
├── angular
│ ├── Dockerfile
│ ├── README.md
│ ├── dist
│ │ ├── css
│ │ │ └── style.css
│ │ ├── img
│ │ │ ├── external.png
│ │ │ ├── favicon.png
│ │ │ ├── footer_logo.png
│ │ │ └── logo.png
│ │ ├── index.html
│ │ └── js
│ │ ├── bundle.js
│ │ └── vendor.js
│ ├── docs
│ │ ├── app
│ │ │ ├── api.js
│ │ │ ├── app.config.js
│ │ │ ├── app.module.js
│ │ │ └── guide.js
│ │ ├── build
│ │ │ ├── index.html
│ │ │ ├── partials
│ │ │ │ ├── api
│ │ │ │ │ ├── common
│ │ │ │ │ │ ├── directive
│ │ │ │ │ │ │ └── app.html
│ │ │ │ │ │ ├── directive.html
│ │ │ │ │ │ ├── type
│ │ │ │ │ │ │ ├── AppController.html
│ │ │ │ │ │ │ └── AppSidebarController.html
│ │ │ │ │ │ └── type.html
│ │ │ │ │ ├── common.html
│ │ │ │ │ ├── components.auth
│ │ │ │ │ │ ├── service
│ │ │ │ │ │ │ └── AuthService.html
│ │ │ │ │ │ └── service.html
│ │ │ │ │ ├── components.auth.html
│ │ │ │ │ ├── components.contact
│ │ │ │ │ │ ├── directive
│ │ │ │ │ │ │ └── lengthCheck.html
│ │ │ │ │ │ ├── directive.html
│ │ │ │ │ │ ├── service
│ │ │ │ │ │ │ └── ContactService.html
│ │ │ │ │ │ ├── service.html
│ │ │ │ │ │ ├── type
│ │ │ │ │ │ │ └── ContactEditController.html
│ │ │ │ │ │ └── type.html
│ │ │ │ │ ├── components.contact.html
│ │ │ │ │ └── components.html
│ │ │ │ ├── api.html
│ │ │ │ ├── guide
│ │ │ │ │ └── howTo.html
│ │ │ │ └── guide.html
│ │ │ └── src
│ │ │ ├── api-data.js
│ │ │ ├── api.js
│ │ │ ├── app.config.js
│ │ │ ├── app.module.js
│ │ │ ├── guide-data.js
│ │ │ └── guide.js
│ │ ├── config
│ │ │ ├── index.js
│ │ │ ├── processors
│ │ │ │ ├── api-data.js
│ │ │ │ ├── guide-data.js
│ │ │ │ └── index-page.js
│ │ │ └── templates
│ │ │ ├── constant-data.template.js
│ │ │ ├── content.template.html
│ │ │ ├── indexPage.template.html
│ │ │ └── module.template.html
│ │ └── content
│ │ ├── api
│ │ │ └── index.md
│ │ └── guide
│ │ ├── howTo.md
│ │ └── index.md
│ ├── files
│ │ ├── default.conf
│ │ └── nginx.conf
│ ├── gulpfile.babel.js
│ ├── karma.conf.js
│ ├── mocks
│ │ └── firebase.mock.js
│ ├── npm-shrinkwrap.json
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── common
│ │ │ │ ├── app-footer.component.js
│ │ │ │ ├── app-footer.html
│ │ │ │ ├── app-header.component.js
│ │ │ │ ├── app-header.html
│ │ │ │ ├── app-pagination.html
│ │ │ │ ├── app-pagination.js
│ │ │ │ ├── app-sidebar.component.js
│ │ │ │ ├── app-sidebar.html
│ │ │ │ ├── app.component.js
│ │ │ │ ├── app.html
│ │ │ │ ├── app.module.js
│ │ │ │ ├── app.spec.js
│ │ │ ├── components
│ │ │ │ ├── auth
│ │ │ │ │ ├── auth-form
│ │ │ │ │ │ ├── auth-form.component.js
│ │ │ │ │ │ ├── auth-form.controller.js
│ │ │ │ │ │ ├── auth-form.html
│ │ │ │ │ │ └── auth-form.spec.js
│ │ │ │ │ ├── auth.module.js
│ │ │ │ │ ├── auth.spec.js
│ │ │ │ │ └── login
│ │ │ │ │ ├── login.component.js
│ │ │ │ │ ├── login.controller.js
│ │ │ │ │ ├── login.html
│ │ │ │ │ └── login.spec.js
│ │ │ │ ├── components.module.js
│ │ │ │ └── dashboard
│ │ │ │ ├── access-point-map
│ │ │ │ │ ├── access-point-map.component.js
│ │ │ │ │ └── access-point-map.html
│ │ │ │ ├── account-stats
│ │ │ │ │ ├── account-stats.component.js
│ │ │ │ │ └── account-stats.html
│ │ │ │ ├── dashboard.component.js
│ │ │ │ └── dashboard.html
│ │ │ ├── root.component.js
│ │ │ ├── root.html
│ │ │ └── services
│ │ │ ├── account.service.js
│ │ │ ├── auth.service.js
│ │ │ └── services.module.js
│ │ ├── img
│ │ │ ├── external.png
│ │ │ ├── favicon.png
│ │ │ ├── footer_logo.png
│ │ │ └── logo.png
│ │ ├── index.html
│ │ └── sass
│ │ ├── base
│ │ │ ├── _buttons.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _headings.scss
│ │ │ ├── _list-group.scss
│ │ │ ├── _main.scss
│ │ │ ├── _media.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _page-header.scss
│ │ │ ├── _scaffolding.scss
│ │ │ ├── _sections.scss
│ │ │ ├── _table.scss
│ │ │ └── _tabset.scss
│ │ ├── components
│ │ │ ├── _auth.scss
│ │ │ ├── _footer.scss
│ │ │ ├── _header.scss
│ │ │ ├── _panels.scss
│ │ │ ├── _root.scss
│ │ │ ├── _sidebar.scss
│ │ │ └── _tablet.scss
│ │ ├── layout
│ │ │ ├── _loading.scss
│ │ │ └── _smb.scss
│ │ ├── style.scss
│ │ ├── utils
│ │ │ ├── _colors.scss
│ │ │ └── _typography.scss
│ │ └── vendors
│ │ ├── _bootstrap.scss
│ │ ├── _colorpicker.scss
│ │ ├── _fontawesome.scss
│ │ └── _rzslider.scss
│ └── templates.js
├── docker-compose.yml
└── express
├── Dockerfile
├── LICENSE
├── README.md
├── bin
│ └── index.js
├── npm-debug.log
├── npm-shrinkwrap.json
├── package.json
└── server
├── app.js
├── config
│ └── config.json
├── controllers
│ ├── accounts.js
│ ├── auth.js
│ ├── index.js
│ ├── todoitems.js
│ └── todos.js
├── migrations
│ ├── 20160717103305-create-todo.js
│ └── 20160717104733-create-todo-item.js
├── models
│ ├── index.js
│ ├── todo.js
│ └── todoitem.js
├── routes
│ └── index.js
└── services
├── account.js
├── cpe.js
├── device.js
└── index.js
59 directories, 166 files
Back-end
Dockerfile
# Create image based on the official Node 6 image from the dockerhub
FROM node:6
RUN useradd --user-group --create-home --shell /bin/false nodejs
# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app
# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app
# Copy dependency definitions
COPY package.json /usr/src/app
# Install dependecies
RUN npm install
# Get all the code needed to run the app
COPY . /usr/src/app
# Expose the port the app runs in
EXPOSE 3000
# Serve the app
CMD ["node", "server/app.js"]
Do I have any bug in this file above according to my file structure ?
Front-end
Dockerfile
FROM alpine:3.6
RUN apk add --update nginx && rm -rf /var/cache/apk/*
RUN mkdir -p /tmp/nginx/client-body
COPY files/nginx.conf /etc/nginx/nginx.conf
COPY files/default.conf /etc/nginx/conf.d/default.conf
COPY dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
dockercompose.yml
version: '2.1'
# Define the services/containers to be run
services:
angular:
build: angular # specify the directory of the Dockerfile
network_mode: bridge
ports:
- 8080:80/tcp
volumes:
- /Users/bheng/Sites/BASE/angular/dist:/usr/share/nginx/html:rw
express: #name of the second service
build: express # specify the directory of the Dockerfile
ports:
- "3000:3000" #specify ports forewarding
mem_limit: 300m
memswap_limit: 1g
volumes:
- .:/home/nodejs/app
- /home/nodejs/app/node_modules
links:
- database
database: # name of the third service
image: postgres
environment:
POSTGRES_PASSWORD: ih4cku
ports:
- "5432:5432" # specify port forewarding
Result
I couldn't get my third instances to start.
I kept getting
docker-compose up
Starting base_angular_1 ...
Starting base_database_1 ...
Starting base_database_1
Starting base_database_1 ... done
Starting base_express_1 ...
Starting base_express_1 ... done
Attaching to base_angular_1, base_database_1, base_express_1
database_1 | LOG: database system was shut down at 2017-08-30 00:54:24 UTC
database_1 | LOG: MultiXact member wraparound protections are now enabled
database_1 | LOG: database system is ready to accept connections
database_1 | LOG: autovacuum launcher started
base_express_1 exited with code 0
How would one go about and debug this further?
ok, after you posted your app.js, I think I can help you.
When you run node app.js, that app.js is being executed and exiting successfully because it is just a module but no server is starting.
You need a file like this:
create a bin folder and inside create a file, name this file www
Names are just suggestions, you can name it whatever.
#!/usr/bin/env node
/**
* Load any undefined ENV variables
*/
require('dotenv').config();
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('app:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
Then make sure you install these packages:
npm install debug --save
npm install dotenv --save
These can be removed from the www file, if you want. I just included them here so my shared www file runs.
Then, in your Dockerfile for the express app, use:
node ./bin/www
This command starts a server, keeps the process alive and serves your app.js express module. Make sure that where you require the app.js file in the www, matches the location of your file. I put there ../app in the require.
How to include it in DockerFile?
I recommend this:
create a start entry in your package.json:
"start": "node ./bin/www"
in the scripts section.
Then, update your Dockerfile:
CMD npm start or CMD ["npm", "start"]
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.
A new Laravel project already comes with some localizations, in english.
.
└── en
├── auth
│ ├── form.php
│ └── message.php
├── button.php
├── general.php
├── groups
│ ├── form.php
│ ├── message.php
│ ├── modal.php
│ ├── table.php
│ └── title.php
├── pagination.php
├── passwords.php
├── reminders.php
├── users
│ ├── message.php
│ ├── modal.php
│ └── title.php
└── validation.php
Are those files available for other languages, too?
Some people have published a few. See for example https://github.com/caouecs/Laravel-lang