Skip to content

Commit 05f3629

Browse files
keionokeiono
committed
Build script updated to support production on GitHub
1 parent 6548ea0 commit 05f3629

File tree

9 files changed

+209
-180
lines changed

9 files changed

+209
-180
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
# Example Apps for the Cytoscape Web
22

3+
- https://cytoscape.org/cytoscape-web-app-examples/
4+
35
## Introduction
46

57
Cytoscape Web has a built-in _App_ hosting mechanism. This repository is the reference implementations for using basic functions in the Apps.
68

79
(TBD)
810

911
## Quick Start
12+
1013
To run all of the apps locally, type:
1114

1215
npm run dev

‎docs/index.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Example Apps for the Cytoscape Web</title>
6+
<title>Example Apps for Cytoscape Web</title>
77
<style>
88
body {
99
font-family: Arial, sans-serif;
@@ -13,7 +13,7 @@
1313
background-color: #f4f4f4;
1414
}
1515
.container {
16-
max-width: 800px;
16+
max-width: 70vh;
1717
margin: 20px auto;
1818
padding: 20px;
1919
background: #fff;
@@ -50,11 +50,8 @@ <h2>Quick Start</h2>
5050

5151
<h2>Example Apps</h2>
5252
<h3>hello-world</h3>
53-
54-
<h2>Developer's Guide</h2>
55-
<h3>How to build and deploy</h3>
56-
57-
<h2>Create a new App</h2>
53+
<h3>simple-menu</h3>
54+
<h3>simple-panel</h3>
5855
</div>
5956
</body>
6057
</html>

‎hello-world/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"type": "module",
66
"main": "dist/hello-cy-web.js",
77
"scripts": {
8-
"build": "webpack --config webpack.config.js",
9-
"dev": "webpack serve --open /remoteEntry.js --mode development"
8+
"build": "webpack --config webpack.config.js --env production=true",
9+
"build-dev": "webpack --config webpack.config.js --env production=false",
10+
"dev": "webpack serve --open /remoteEntry.js --mode development --env production=false"
1011
}
1112
}

‎hello-world/webpack.config.js‎

Lines changed: 64 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -13,64 +13,72 @@ const __dirname = path.dirname(__filename)
1313

1414
const DEV_SERVER_PORT = 2222
1515

16-
export default {
17-
mode: 'development',
18-
devtool: false,
19-
target: 'web',
20-
optimization: {
21-
minimize: false,
22-
runtimeChunk: false,
23-
splitChunks: {
24-
chunks: 'async',
25-
name: false,
26-
},
27-
},
28-
entry: './src/index.ts',
29-
output: {
30-
clean: true,
31-
path: path.resolve(__dirname, 'dist'),
32-
publicPath: 'auto',
33-
},
34-
resolve: {
35-
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.d.ts'],
36-
},
37-
plugins: [
38-
new ModuleFederationPlugin({
39-
name: 'hello',
40-
filename: 'remoteEntry.js',
41-
remotes: {
42-
// Import some data providers from the host application
43-
cyweb: 'cyweb@http://localhost:5500/remoteEntry.js',
44-
},
45-
exposes: {
46-
'./HelloApp': './src/HelloApp',
47-
'./HelloPanel': './src/components/HelloPanel.tsx',
48-
'./MenuExample': './src/components/MenuExample.tsx',
16+
export default (env = {}) => {
17+
// Extract the environment variables to modify URLs and other settings
18+
const isProduction = env.production || false
19+
const cywebUrl = isProduction
20+
? 'cyweb@https://web.cytoscape.org/remoteEntry.js'
21+
: 'cyweb@http://localhost:5500/remoteEntry.js'
22+
23+
return {
24+
mode: 'development',
25+
devtool: false,
26+
target: 'web',
27+
optimization: {
28+
minimize: false,
29+
runtimeChunk: false,
30+
splitChunks: {
31+
chunks: 'async',
32+
name: false,
4933
},
50-
shared: {
51-
react: { singleton: true, requiredVersion: deps.react },
52-
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
53-
'@mui/material': {
54-
singleton: true,
55-
requiredVersion: deps['@mui/material'],
34+
},
35+
entry: './src/index.ts',
36+
output: {
37+
clean: true,
38+
path: path.resolve(__dirname, 'dist'),
39+
publicPath: 'auto',
40+
},
41+
resolve: {
42+
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.d.ts'],
43+
},
44+
plugins: [
45+
new ModuleFederationPlugin({
46+
name: 'hello',
47+
filename: 'remoteEntry.js',
48+
remotes: {
49+
// Import some data providers from the host application
50+
cyweb: cywebUrl,
5651
},
57-
},
58-
}),
59-
],
60-
module: {
61-
rules: [
62-
{
63-
test: /\.tsx?$/,
64-
use: 'ts-loader',
65-
exclude: /node_modules/,
66-
},
52+
exposes: {
53+
'./HelloApp': './src/HelloApp',
54+
'./HelloPanel': './src/components/HelloPanel.tsx',
55+
'./MenuExample': './src/components/MenuExample.tsx',
56+
},
57+
shared: {
58+
react: { singleton: true, requiredVersion: deps.react },
59+
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
60+
'@mui/material': {
61+
singleton: true,
62+
requiredVersion: deps['@mui/material'],
63+
},
64+
},
65+
}),
6766
],
68-
},
69-
devServer: {
70-
hot: true,
71-
port: DEV_SERVER_PORT,
72-
headers: {
73-
'Access-Control-Allow-Origin': '*', // allow access from any origin
67+
module: {
68+
rules: [
69+
{
70+
test: /\.tsx?$/,
71+
use: 'ts-loader',
72+
exclude: /node_modules/,
73+
},
74+
],
75+
},
76+
devServer: {
77+
hot: true,
78+
port: DEV_SERVER_PORT,
79+
headers: {
80+
'Access-Control-Allow-Origin': '*', // allow access from any origin
81+
},
7482
},
75-
},
83+
}
7684
}

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"dev:hello-world": "npm run dev -w hello-world",
1515
"dev:simple-menu": "npm run dev -w simple-menu",
1616
"dev:simple-panel": "npm run dev -w simple-panel",
17-
"dev:project-template": "npm run dev -w project-template"
17+
"dev:project-template": "npm run dev -w project-template",
18+
"deploy": "npm run build && npm run copy-dist",
19+
"copy-dist": "cp -r hello-world/dist docs/hello-world && cp -r simple-menu/dist docs/simple-menu && cp -r simple-panel/dist docs/simple-panel"
1820
},
1921
"peerDependencies": {
2022
"@emotion/react": "^11.13.3",

‎simple-menu/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"version": "1.0.0",
55
"type": "module",
66
"scripts": {
7-
"build": "webpack --config webpack.config.js",
8-
"dev": "webpack serve --open /remoteEntry.js --mode development"
7+
"build": "webpack --config webpack.config.js --env production=true",
8+
"build-dev": "webpack --config webpack.config.js --env production=false",
9+
"dev": "webpack serve --open /remoteEntry.js --mode development --env production=false"
910
}
1011
}

‎simple-menu/webpack.config.js‎

Lines changed: 63 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -13,63 +13,71 @@ const __dirname = path.dirname(__filename)
1313

1414
const DEV_SERVER_PORT = 3333
1515

16-
export default {
17-
mode: 'development',
18-
devtool: false,
19-
target: 'web',
20-
optimization: {
21-
minimize: false,
22-
runtimeChunk: false,
23-
splitChunks: {
24-
chunks: 'async',
25-
name: false,
26-
},
27-
},
28-
entry: './src/index.ts',
29-
output: {
30-
clean: true,
31-
path: path.resolve(__dirname, 'dist'),
32-
publicPath: 'auto',
33-
},
34-
resolve: {
35-
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
36-
},
37-
plugins: [
38-
new ModuleFederationPlugin({
39-
name: 'simpleMenu',
40-
filename: 'remoteEntry.js',
41-
remotes: {
42-
// Import some data providers from the host application
43-
cyweb: 'cyweb@http://localhost:5500/remoteEntry.js',
44-
},
45-
exposes: {
46-
'./SimpleMenuApp': './src/SimpleMenuApp',
47-
'./AppMenuItem': './src/components/AppMenuItem',
16+
export default (env = {}) => {
17+
// Extract the environment variables to modify URLs and other settings
18+
const isProduction = env.production || false
19+
const cywebUrl = isProduction
20+
? 'cyweb@https://web.cytoscape.org/remoteEntry.js'
21+
: 'cyweb@http://localhost:5500/remoteEntry.js'
22+
23+
return {
24+
mode: 'development',
25+
devtool: false,
26+
target: 'web',
27+
optimization: {
28+
minimize: false,
29+
runtimeChunk: false,
30+
splitChunks: {
31+
chunks: 'async',
32+
name: false,
4833
},
49-
shared: {
50-
react: { singleton: true, requiredVersion: deps.react },
51-
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
52-
'@mui/material': {
53-
singleton: true,
54-
requiredVersion: deps['@mui/material'],
34+
},
35+
entry: './src/index.ts',
36+
output: {
37+
clean: true,
38+
path: path.resolve(__dirname, 'dist'),
39+
publicPath: 'auto',
40+
},
41+
resolve: {
42+
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
43+
},
44+
plugins: [
45+
new ModuleFederationPlugin({
46+
name: 'simpleMenu',
47+
filename: 'remoteEntry.js',
48+
remotes: {
49+
// Import some data providers from the host application
50+
cyweb: cywebUrl,
5551
},
56-
},
57-
}),
58-
],
59-
module: {
60-
rules: [
61-
{
62-
test: /\.tsx?$/,
63-
use: 'ts-loader',
64-
exclude: /node_modules/,
65-
},
52+
exposes: {
53+
'./SimpleMenuApp': './src/SimpleMenuApp',
54+
'./AppMenuItem': './src/components/AppMenuItem',
55+
},
56+
shared: {
57+
react: { singleton: true, requiredVersion: deps.react },
58+
'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
59+
'@mui/material': {
60+
singleton: true,
61+
requiredVersion: deps['@mui/material'],
62+
},
63+
},
64+
}),
6665
],
67-
},
68-
devServer: {
69-
hot: true,
70-
port: DEV_SERVER_PORT,
71-
headers: {
72-
'Access-Control-Allow-Origin': '*', // allow access from any origin
66+
module: {
67+
rules: [
68+
{
69+
test: /\.tsx?$/,
70+
use: 'ts-loader',
71+
exclude: /node_modules/,
72+
},
73+
],
74+
},
75+
devServer: {
76+
hot: true,
77+
port: DEV_SERVER_PORT,
78+
headers: {
79+
'Access-Control-Allow-Origin': '*', // allow access from any origin
80+
},
7381
},
74-
},
82+
}
7583
}

‎simple-panel/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"private": "true",
66
"type": "module",
77
"scripts": {
8-
"build": "webpack --config webpack.config.js",
9-
"dev": "webpack serve --open /remoteEntry.js --mode development"
8+
"build": "webpack --config webpack.config.js --env production=true",
9+
"build-dev": "webpack --config webpack.config.js --env production=false",
10+
"dev": "webpack serve --open /remoteEntry.js --mode development --env production=false"
1011
}
1112
}

0 commit comments

Comments
 (0)