So I have created a React app with
npx create-react-app my-app
and written a few functions and some content to my web app. Now I do need to implement backend for connecting to my SQL database and reading/writing from there. It is my understanding that server-side logic (NodeJS) and front-end code (React) should be in same repository, but how exactly is that done? I should probably create /backend folder and server.js inside it, but where? In the same folder with node_modules, public and src or elsewhere? Also, it would be nice to know more about how information exchange between Node and React works so I can display data fetched from database with React. Thanks in advance.
For development I have two folders on same level - src with react and server with node.
You start (e.g.)
nodejs server on port 5000
webpack-dev-server on port 3000
React communicates with backend via REST API. You have to proxy api requests to your server (part of webpack dev configuration):
devServer: {
contentBase: path.join(__dirname, 'server', 'static', 'public'),
port: 3000,
publicPath: 'http://localhost:3000/',
historyApiFallback: true,
disableHostCheck: true,
hot: true,
proxy: {
'/api': {
target: 'http://127.0.0.1:5000/',
},
},
},
In production environment the react is compiled to server/reactapp subfolder and served with expressjs as any other webpage.
Part of webpack production:
output: {
path: path.join(__dirname, 'server', 'reactapp'),
// publicPath: path.join('dist'),
filename: '[name].bundle.js',
publicPath: '/',
},
In Express (or any other web framework) you then serve the /api path with your backend tasks.
This all means I have two separated development environments - server and react, which partly join till in production environment. They both have separated package.json and node_modules.
In newer versions I have replaced REST API communication with websocket, what needs some other settings in communication.
Related
I created a motoko backend and added some JavaScript and HTML for the frontend. Now I would like to deploy my project using webpack.
After the successfull deployment I get the following error interacting with the frontend:
[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/v2/status to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
Reading the documentation the frontend should run on the server http://localhost:8080 and API request will be proxyed to the replica on port 8000.
If I open port 8000 it says:
Could not find a canister id to forward to.
So from my understanding, the frontend server runs and if he makes an API call (e.g. calling a function within my code) it proxys it to port 8000, but the service on this port is inactive.
The webpack.config.js config for the proxy:
// proxy /api to port 8000 during development
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
changeOrigin: true,
pathRewrite: {
"^/api": "/api",
},
},
},
hot: true,
watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
liveReload: true,
},
};
UPDATE
I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.
I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.
I am totally new to NodeJS, Webpack and specially to Outlook Addin. So, I created my Outlook Addin using basic tutorials from https://learn.microsoft.com/en-us/outlook/add-ins/addin-tutorial, all went well.
However, when it came to deployment on Production, I struggled a lot. I put all my code up on Production (Ubuntu instance). First tested a simple NodeJS "hello World" app on Port:8080 and it worked just fine. Then I tried to start my Outlook Addin, just like I was doing locally, it started on port 3000, but I needed to run it on 8080 and in the background. So, I used "PM2", and here comes the "WALL".
pm2 start src/index.js doesn't work for me, as the inside Office.onReady or any other reference to Office does not work, throws undefined Office error.
I tried pm2 run-script build, (after modifications in package.json and webpack.prod.js files)
However, I am still getting the same error when try to run pm2 start dist/app.bundle.js
So, please guide me which file should I reference to when using pm2 start {filename/path}?
Here are some configurations that I am using,
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
polyfill: 'babel-polyfill',
app: './src/index.js',
'function-file': './function-file/function-file.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'html-loader'
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
}),
new HtmlWebpackPlugin({
template: './index.html',
chunks: ['polyfill', 'app']
}),
new HtmlWebpackPlugin({
template: './function-file/function-file.html',
filename: 'function-file/function-file.html',
chunks: ['function-file']
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map'
});
Contents of an Add-in
The files that are produced from your project when building should be at least some JavaScript, then perhaps HTML and some CSS, depending on what kind of add-in you're building. The most common is probably building an add-in with a task pane - which is basically a web page. In any case, the built files is not a Node.js web server.
Hosting your Add-in
Making your add-in available inside Outlook or Office requires that you host your files somewhere. It can be done with any web server - a simple python web server, Apache, Node.js HTTP server, or anything similar. It can be done on either localhost or in some other hosting service. The add-in tutorial shows you how to run a Webpack development server to host the files on https://localhost:3000 while you are coding (npm run start).
In your manifest.xml file you'll notice that you specify the address where your files are hosted. In my development setup, for an add-in with a task pane, I've specified that the files are hosted on localhost, like this:
<FormSettings>
<Form xsi:type="ItemRead">
<DesktopSettings>
<SourceLocation DefaultValue="https://localhost:3000/index.html"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>
</Form>
</FormSettings>
Production
However, when running your app in production, the tutorial says that you should do npm run build. Those files that are produced, need to be hosted somewhere. I've hosted my add-in on Amazon S3, which is another way of hosting files.
To simulate it on localhost, follow these steps.
In the same folder as your project (where the dist/ folder is located):
Run npm install http-server -g
Run http-server dist/
Tools
To clarify what the tools are used for:
Webpack is what puts your app together, from your source code to a bundled version which can be run in a browser context. Webpack development server can be used to host files on localhost during development
Node.js HTTP server can also be used to host files on your localhost
pm2 is a process manager for Node.js. You can use it for hosting a Node.js server in production
#shahroon and I working on the issue together. We're still not able to get things to work and have now paid for a support with Microsoft. Sadly and very frustratingly Microsoft hasn't even acknowledge our support ticket and it's been 3 days.
Nodejs application created using Express (express genrator) and used handlebars as view engine. Created couple of routes and works fine. Application running on port 3000.
Express routes:
...
app.use('/', index);
app.use('/landing', landing);
app.use('/home', home);
app.use('/api', api);
...
There is an admin panel separate application built on Angular
Currently Angular application running on port 4200 and uses APIs from NodeJs application which running on port 3000.
Angular application routes
const routes : Routes = [
{ path: '', redirectTo: '/user', pathMatch: 'full' },
{
path: 'user',
component : UserComponent,
children : [
{ path:'', redirectTo: '/account', pathMatch: 'full' },
{ path: 'account', component: AccountComponent },
]
},
]
NodeJs application folder structure
api/
api.js
bin/
www
modules/
mongoose.js
node_modules/
public/
css/
fonts/
img/
js/
ngapp/ => Angular resources created with ng build
inline.bundle.js
main.bundle.js
polyfills.bundle.js
styles.bundle.js
vendor.bundle.js
routes/
home.js
index.js
landing.js
views/
common/
header.hbs
footer.hbs
layouts/
master.hbs
ngapp/
index.html => Angular index.html file
index.hbs
landing.hbs
home.hbs
app.js
package.json
What I'm trying:
Want to run both NodeJs and Angular application on same port i.e. port 3000.
What I have done:
Ran ng build and placed index.html file inside /views/ngapp/ of nodejs folder structure.
Created one 'user' route in nodejs and serving that index.html file of angular application. (May be this is not a good way)
app.get('/user', function (req, res, next) {
res.sendFile(path.join(__dirname + '/views/ngapp/index.html'));
});
Somehow its loaded but encountered an error:
My question is about how we can integrate Angular Application (may be running on separate route but on the same port) with NodeJs application which already have some routes defined and used view engine to render pages.
There are two possible solutions.
Use your node application to serve the static frontend files. Then you can't really use ng serve (this is probably what you'd do when running live).
You should be able to tell Express to serve static content from an Angular build directory like this:
app.use(express.static('../angular/dist'));
Which would work if you had a file structure like so and were running serve.js with Node:
-node server
-serve.js
-angular
-dist/*
You can customize as needed by configuring the Angular build folder to be wherever you need it, or use Grunt/Gulp to move files around to the folders you prefer with a build task.
Use nodejs with a different port, and use Angular's proxy config, to have Angular think the api port is actually 4200 (this is probably best during development).
This is primarily a concern during development I reckon, since you most likely wont (and shouldn't) be using ng serve live, so option 2 would be my best recommendation.
To configure a proxy, you create a file in your angular application root directory called proxy.config.json with the following content:
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
}
}
Then when you run ng serve, you run it with ng serve --proxy-config proxy.config.json instead.
I am attempting to setup a project that uses both Angular 5 and Wordpress. Currently my solution allows the serving of both applications using node. From the root directory I run "node index.js" to run wordpress, and in a separate terminal, in a subdirectory I run "ng serve" to run the angular implementation.
Is it possible to run both angular and wordpress on the same terminal window? An example being, by typing "node index.js" in the root directory, can I serve both the angular application in a subdirectory and the wordpress through that one console?
My projects are pretty bare but here is some base code:
/index.js
const express = require('express')
const epf = require('express-php-fpm')
const options = {
// root of your php files
documentRoot: __dirname + '/wordpress',
// extra env variables
env: {},
// connection to your php-fpm server
// https://nodejs.org/api/net.html#net_socket_connect_options_connectlistener
socketOptions: { port: 9000 },
}
const app = express()
app.use('/', epf(options))
app.listen(3000)
/subproject/protractor.conf.js
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
Thank you.
I am working on a new plugin, Xo for Angular that may provide a solve for the use case above.
https://wordpress.org/plugins/xo-for-angular/
Xo gives you the option to load an Angular App as a theme with WordPress serving only as the management interface. Routes can be generated dynamically so all pages and posts are instantly viewable on the front-end without needing to recompile.
For local development I recommend setting up either apache or nginx using a tool like XAMPP. I have detailed the setup I use for my own local development here: https://github.com/WarriorRocker/angular-xo-material
Once you have wordpress running through a server like apache you can then just run ng build and let Xo load your App/theme through the main front-end. Alternatively you can also run with ng serve for rapid development.
In production you can either have Xo load your App and inject wp_head/wp_footer as necessary (Live Redirect Mode) or redirect all front-end requests to your App's dist index.html (Offline Redirect Mode).
Additional docs (work in progress): https://angularxo.io/
I am new to React and Node, trying to setup an environment to work.
I worked a little with Node.js/Express before and I used nodemon to monitor file changes and restart my app.
Also I recently started to work with React and I use webpack dev server (specifically webpack-dev-server --content-base src --inline --hot --history-api-fallback) setup that monitors file changes and reload the UI.
The problem
Now, I want to tie it together.
First solution I found was: Start my node app on specific port, say 3000 then start webpack dev server on 8080 port and proxy requests to specific urls to my backend app.
devServer: {
proxy: {
'/backend-api/': {
target: {
"host": "localhost",
"protocol": 'http:',
"port": 3000
},
ignorePath: false,
changeOrigin: true,
secure: false
}
}
},
It should work but i do not feel right starting two servers for single application.
Is there any way (and simple example i could understand) to start single server that would serve both: a server side app and React UI?
And of course, it should track file changes and restart server app if server code changes OR reload UI if client side code changes.
You can use webpack through Express middleware using this package: https://github.com/webpack/webpack-dev-middleware
You can use it by simply adding it to the app:
var webpackMiddleware = require("webpack-dev-middleware");
app.use(webpackMiddleware(webpack({/* webpack options */})));
In addition there's a package that builds on this to offer hotloading and "Create React App" style terminal display: https://www.npmjs.com/package/webpack-express-middleware