I am using bower.js to keep jquery and bootstrap version ahead, and using grunt.js to minify and join files together
but some 3rd library like bootstrap have both js file and css file, where the whole bootstrap folder should I put? I have consider a structure like this:
project
|
|---build
| |--js // minify jquery.min.js + bootstrap.min.js + script.min.js
| |--css
|
|---src
| |--js //my own script.js file
| |--css //my own style.css file
|
|---bower_components
| |---jquery
| |---bootstrap
|
|---bower.json
|---Gruntfile.js
Is this appropriate?
Related
I faced a problem with adjusting paths for my project. The project has following structure:
prj
|-common
| |-types
| |-somefile.ts ...
|
|-server
| |-node_modules
| |-package.json ...
|
|-client
| |-node_modules
| |-package.json
| |-angular.json ...
somefile.ts
import { Observable, Subject } from 'rxjs'; !!!Cannot find module 'rxjs' or its corresponding type declarations
export class Someclass {}
As you may see i want to reuse common types between server and client side. somefile.ts is easily imported in project via relative path. But when the somefile.ts is used in some of the project, popups error for "rxjs" module.
How to properly configure package.json for projects?
If it’s not a core module (you installed it), you need to give a path to node_modules folder. Which I can see there’s two.
You need to make sure which one of them contains rxjs.
Then give the path like this:
const rxjs = require("../../server/node_modules/rxjs");
I have bough a pre-built template from third party vendor and it is a big and comprehsine reactjs application. Now I need to add some backend capabilities to it by using express.js. I do not know how to change that application
the structure for my reactjs application is as follow:
/node_modules
/public
/src
package.json
it is a simpem react application and israt with react-scripts start by npm start command. All the file in react is javascript files and there are no HTML files there. Does anyone know an article or a guidance how to add exressjs backend to my custom reactjs application?
You must follow the separation of concerns principle and create node (express) backend application separately, and react communicates with the node using APIs.
Else create a new folder naming your application, create 2 folders inside, server and client, copy react application folder in client and node application in server like below
/MyAPP
/Client
/node_modules
/public
/src
package.json
/Server
/node_modules
/src
app.js
package.json
TL;DR;
keep both applications separated to there own git repository and treat them as separate projects. Add dev-server to your frontend project and proxy all API requests to the backend project.
Today most web applications are using Reverse-Proxy to serve both frontend and backend on the same domain (each one still has its own server).
// prod
Client
(Browser)
+
|
| MyDomain.com
v
+--------+--------+
| Reverse Proxy |
| (Nginx) |
+--+---------+----+
| |
BE_IP:3000 | | BE_IP:8080
v v
+--------+--+ +-+----------+
| Backend | | Frontend |
| (TBD) | | (React) |
+-----------+ +------------+
This pattern should be used in your dev environment as well. Luckily dev-server does just that (and has many helpful tricks for local development).
// dev
Client
(Browser)
+
|
| localhost:9000
v
+--------+--------+
| Reverse Proxy |
| (dev-server) |
+--+---------+----+
| |
localhost:3000 | | localhost:8080
v v
+--------+--+ +-+----------+
| Backend | | Frontend |
| (TBD) | | (React) |
+-----------+ +------------+
How to implement this into your code:
Create separate projects for each application (one for front and one for back)
Add dev-server to your frontend project and serve the /public directory (flow this https://webpack.js.org/configuration/dev-server/)
create a backend project (keep it simple for now)
setup dev-server to redirect all request that starts with /api to the API server (flow this https://webpack.js.org/configuration/dev-server/#devserverproxy)
I have a node module inside my node_modules directory. However, I can't figure out how to use it. The structure looks like this:
node_modules
|- ...
|- foo-bar
| |- dist
| | |- css
| | - css files here
| | |- js
| | - js files here
| | |- foo-images
| | - image files here
| | |- index.js
| |- index.js
| |- package.json
|- ...
The index.js has this in it:
require('./dist/js/foo');
module.exports = 'foo';
So my question is how do I use it? In my app.component.ts, I tried putting the following code at the top:
import { foo } from './foo-bar';
But there's an error on foo between the curly braces saying it doesn't know what that is. When I tried require('foo'), I get an error saying it doesn't know what require is (I have Express installed).
How would I use the CSS and JavaScript functions from the node module? I'm new to Angular 5, so I'm not totally familiar with how it works. Any help would be appreciated, thank you!
Angular is Front End Framework and NodeJS is server side so you will have to run any node modules on the back end server... I had a similar problem when I wanted to resize file images locally with image magick and then upload to the server. Use express to get the data from the server to the front end where you can then put your data inside '{{}}' :)
I'm creating a React + Flux web app with a file structure that looks like this:
MyApp
|---
|---scripts
|---app.jsx
|---actions
|---components
|---HomePage.react.jsx
|---NotFoundPage.react.jsx
|--- ...etc
|---dispatcher
|---stores
1) Where do I place public assets like pictures, videos, text files or whatever..
2) Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.
I usually use a dist or public folder where all asset are kept. When I release the app, the bundles are saved in the dist folder.
For example:
MyApp
|-- app
| |---app.jsx
| |---actions
| |---components
| |---HomePage.react.jsx
| |---NotFoundPage.react.jsx
| |--- ...etc
| |---dispatcher
| |---stores
|-- public
| -- js -- bunlde.js
| -- img -- images
| -- css -- app.css
Is there a standard/neat way to load them? All I've found is this library but there must be something more people use.
You can just include them in the index.html. However, recently I've been bundling the css into the javascript file so that I have one single file.
You can do that with:
webpack: https://github.com/webpack/css-loader
browserify: https://github.com/cheton/browserify-css
I just joined a team that has an Express + Node + MongoDB project with little to no front end framework. I'm looking to build Grunt and Ember into the project. I've never done this before, usually I start from scratch with some kind of stack (whether it is Yeoman or MEAN).
Are there any good tutorials for building Grunt and Ember into an existing project/things I should watch out for? This question is probably too broad (plus it doesn't really have a correct answer...) but I thought I'd shoot it out here and close it in 10 minutes or so if that is the case.
There's very little interlope between your ember and node apps. All you really need from express is to statically serve your index.html and the resources.
The way I handled it was:
Create your ember app in a separate directory from your express.js app (so you don't mix up codebases)
Directory structure:
project
|- backend
| |- ... your node app
|- frontend
| |- [package.json]
| |- [Gruntfile.js]
| |- public
| | |- js
| | |- styles
| | |- images
| | |- [index.html]
| |- dev
| | |- vendor
| | |- controllers
| | |- styles
| | |- templates
| | |- ... (other Ember folders)
| | |- [app.js]
| | |- [vendor.js]
Your Gruntfile.js tasks should take their sources from dev and compile them into public. Must use modules IMO:
grunt-neuter to combine your js sources (recommended outputs: public/js/vendor.js and public/js/app.js)
grunt-ember-templates to compile your handlebar templates into functions, so you don't have to drag the entire handlebars.js to the client (recommended output: public/js/templates.js
All the sources you will work on should go to the dev folder. This includes:
Handlebars templates (eg. dev/templates)
Less or sass styles (dev/styles)
Vendor libraries (dev/vendor/...)
Ember controllers, views, etc.
If you're using neuter, put all the includes inside dev/app.js file, in the order you want. You can initialize your main ember app at the end. I like to separate vendor libraries into their own dev/vendor.js file. These will be compiled into their public/js/... counterparts.
Your index.html should load all the compiled scripts and styles from the public folder. If you set up your project like described here, it should end up loading 3 javascripts and 1 css.
Finally, add a static handler to your express.js app and have it serve folder ../frontend/public. Depending on the config, you might need a separate index.html handler for / route.
This is the pattern I developed before ember-cli became popular. So far, I'm pretty pleased with the results. But you might want to check out ember-cli, just in case they developed a better approach.