How to run cubeJS-Backend application using express - cube

I am trying to run cubeJs-backend application using express. I have added code changes like below.
I have created cube.js file with the below code
const express = require('express');
const path = require('path');
const expressApp = express();
const options = {
basePath: 'cube'
}
require('dotenv').config();
const core = CubejsServerCore.create(options);
core.initApp(expressApp);
I have used .env file for the environment variables. When I run the application using node cube.js the application got started and also connecting to the data base. But, when I try to load in the browser using http://localhost:4000 it is not loading.
Here is my .env values:
CUBEJS_DB_HOST=localhost
CUBEJS_DB_PORT=5438
CUBEJS_DB_NAME=test
CUBEJS_DB_USER=postgres
CUBEJS_DB_PASS=test
CUBEJS_DEV_MODE=true
CUBEJS_DB_TYPE=postgres
CUBEJS_API_SECRET=b6e176d3942fd2811bacfd2b5e5dd00b47aae3f07d92000961f17c60f4d9a30eca5bfde0e1f2d460d9e358a0a6be7b3fa6812f245713915a1effea402a716c13
CUBEJS_EXTERNAL_DEFAULT=true
CUBEJS_SCHEDULED_REFRESH_DEFAULT=true
CUBEJS_WEB_SOCKETS=true

Embedding Cube.js within Express (any other framework / in application) is deprecated.
I suggest you run Cube.js with Docker, as it’s a better solution than embedding it into an Express app.
This link might be helpful as well: https://cube.dev/blog/cubejs-loves-docker

Related

How to self-host Gatsby v4 with Server Side Rendering (SSR) capabilities

I'm trying to set up a site to host static content, using GatsbyJS. Some of my pages use SSR. When I run it using gatsby serve from the project root, i'm able to view these pages. I'm not sure how I can deploy and host this application with SSR capabilities. according to this page, gatsby serve is to be used only to test the production build, which infers that there may be a different strategy to host actual production.
Our goal is to deploy to a virtual private server (vps) or Azure App Service, where we have more or less full control of our environment.
I was able to host the static site using this script on Azure App Service (win-node16):
const express = require('express');
const gatsbyExpress = require('gatsby-plugin-express');
const app = express();
const port = process.env.PORT || 8080;
const dev = process.env.NODE_ENV !== "production";
// serve static files before gatsby
Express app.use(express.static('public/'));
app.use(gatsbyExpress('config/gatsby-express.json',
{
publicDir: 'public/',
redirectSlashes: true,
}));
app.listen(port, function() {
console.log(`App started on port ${port}`);
});
this seems serve the static pages properly, but all pages with SSR returns 404. I surmise it may be due to the fact that those pages did not have html stubs generated. as I'm new to Express, i'm also not sure if this is the right approach
if anyone has advice on hosting that would be appreciated.
unfortunately this plugin gatsby-plugin-express is 2 or 3 years old and therefor doesn't support server-side rendering.
You can see this question How to properly run gatsby with SSR in a production environment for more options.
TL;DR: There is no option for self-hosting it unless you will write it yourself.

React setupProxy.js for different environments

I am very new to react but my issue is really around strategies for deploying my app to different environments (dev, QA, UAT). My react app makes an api call and I am using a setupProxy.js to define the url for that api, works great locally. I have also built the api and it is hosted separately. My question is how do I change the setupProxy.js so that the url respects the environment it's deployed to. Right now I'm using AzureDevops and Octopus for building and deploying. It seems like everything gets compiled so trying to change this file after is built won't work. Just looking to see what your deployment strategies are.
Here is my setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
const baseUri = 'http://localhost:5000/api';
const proxy = {
target: baseUri + '/UsageRequest/ScreenScrapeErrors',
changeOrigin: true
}
const proxy2 = {
target: 'https://www.stackoverflow.com',
changeOrigin: true,
}
module.exports = function (app) {
app.use(
'/SceenScrapeErrors',
createProxyMiddleware(proxy)
);
app.use(
'/jobs',
createProxyMiddleware(proxy2)
);
};
I would like to modify the baseUri variable as it's getting deployed to the different environments.
This blog post may help you: https://octopus.com/blog/javascript-configuration
You can move your environmental configuration to a JSON configuration file and modify your app to read the values from that value.
Octopus can replace variables in JSON configuration files during deployment using the structured configuration variables feature.

Integrate and serve React-Admin from existing Express application

In my project I need an administrator application. I have stumbled upon the admin-react. It seems it does exactly what I need it to do. I have checked their tutorial. Made some drafts, and got it running (following tutorial).
However I have an Express application that has routes and API's already working, and also I have React application served by the Express one. I would like to serve the Admin-React instead, in other words remove the existing React application and start customizing the React-Admin one as a static resource. Simply, my existing Express application should serve the React-Admin and expose the existing API's to it.
Looking at the tutorials, I found no information how to do it. It had yarn start and it starts running on port 3000.
I am missing something here very basic it seems.
Is there an example of that setup?
This is my Express.js that already serves React application (not React Admin) from public folder.
'use strict';
/* jshint camelcase:false */
require('dotenv').config();
if (process.env.NODE_ENV === undefined) {
throw new Error('No environment variable was set. For development use [export NODE_ENV=dev].');
}
let express = require('express');
var favicon = require('serve-favicon');
let path = require('path');
let cookieParser = require('cookie-parser');
let bodyParser = require('body-parser');
let expressValidator = require('express-validator');
let configuration = require('./app/Configuration');
let app = configuration.getApp();
let config = configuration.getParameters();
let errorHandler = require('./src/Error/Handler');
let session = require('client-sessions');
app.use(require('./src/Twig/ExtendWithCustomFunctions').extend());
app.use(session({
cookieName: 'session',
secret: 'xxxxxxx',
duration: 12 * 60 * 60 * 1000,
activeDuration: 2 * 60 * 60 * 1000
}));
app.use(bodyParser.json());
app.use(errorHandler.bodyParser);
app.use(expressValidator());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(favicon(__dirname + '/public/favicon.ico'));
configuration.setErrorHandler(errorHandler);
configuration.initializeControllers(__dirname);
configuration.initializeErrorHandling();
module.exports = app;
The only way to serve a React Admin from an Express endpoint is to build it first.
If you followed the tutorial, you should have run a create-react-app application, so you can run the following command to bundle your app:
npm run build
# or
yarn build
Your bundle files will be available under the static folder.
Then, you can move these files to your express app, in a subfolder, where you'll be able to serve them with express.static.
More info about the create-react-app build & deployement: https://facebook.github.io/create-react-app/docs/deployment
There is even an example of how to serve the build: https://facebook.github.io/create-react-app/docs/deployment#other-solutions

How to add React to Express.js

I have got the basic files of express with express generator.
Now I want to add react to my express folder and integrate react with express. How can I do?
In your express file, you would need to link your react folder as static assets.
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'client/build'))); // this is where your built react js files are
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname+'/client/build/index.html'));
}); // this makes sure that all paths access your react.js files
while in development, you can access your express app by adding a proxy option in your package.json
for example, when you start your express with
node index.js
It will be served at a localhost:3000 or something else when you specify another port like localhost:5000
In order to access the json or the data your express app is sending, you need to setup a proxy in your client's package.json. The proxy is used for data to be accessed, so before your client side connects to a localhost, it goes through that proxy to have access to data being sent
If for example, your express app is run at localhost:5000, add the following to your client sides package.json
"proxy": "http://localhost:5000"
so start your express app first then your react app, and you will have combined your react app with your express server.

How to add my own server code to webpack-dev-server execution

Basic question about how to add my own server-based code to webpack-dev-server, or alternatively, replace webpack-dev-server with express (giving up hot module reloading). I expected to find a file called something like server.js, that I can add my own code to. This is a basic question, as every non-static application needs their own server code, but I haven't found a straight forward way of doing it. I'm using Angular 2 Webpack Starter. I would expect it to be easy to subsequently drop webpack-dev-server for straight express when going to production.
You can still use Express and have hot reloading, by using webpack-dev-middleware and webpack-hot-middleware.
Both middleware should not be loaded in production, for which you can use something like this:
// Webpack (when not running in production mode)
if (process.env.NODE_ENV !== 'production') {
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.config');
const compiler = require('webpack')(webpackConfig);
app.use(webpackDevMiddleware(compiler, {
noInfo : true,
publicPath : webpackConfig.output.publicPath
}));
app.use(webpackHotMiddleware(compiler));
}
(app is an Express instance)

Resources