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)
Related
I tried to create a multi module/package project with npm today.
The structure is as following:
root
|
|____ backend <-- npm package containing all routes
|
|____ frontend <-- npm package containing all js/html/css files
|
|____ dist <-- merged output from backend & frontend
|
|____ build_and_run.sh <-- shell script to invoke npm in both - frontend and backend and run the final application in "dist/"
The frontend should be in the "dist/static" directory.
Both - the frontend and backend are using different dependencies and compiling steps (TypeScript, VueJS etc.), so the differentiation between frontend and backend currently makes the most sense to me.
My problem is the deploying of both modules/packages into the final directory.
Copying the files isn't a problem, but deploying dependencies into the "dist" directory is (e.g. express).
The second goal is to create a Docker file, but this option shouldn't be neccessary for running the server.
If someone has a better structure or solution fitting my needs, I would definitely appreciate to hear it.
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.
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?