Skip to content

Commit

Permalink
Add React example demo app
Browse files Browse the repository at this point in the history 
Ignore best practices for npm and work without package-lock.json.
This file is ~300kb and should not bloat the skaffold repository.

Signed-off-by: Cornelius Weig <22861411+corneliusweig@users.noreply.github.com>
  • Loading branch information
@corneliusweig
corneliusweig committed Mar 19, 2019
1 parent 5b54d97 commit 4da9205
Show file tree
Hide file tree
Showing 26 changed files with 294 additions and 0 deletions.
16 changes: 16 additions & 0 deletions examples/react-reload/README.adoc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
=== Example: React app with hot-reload
:icons: font

Simple React app demonstrating the file synchronization mode in conjunction with webpack hot module reload.

==== Init
`skaffold dev`

==== Workflow
* Make some changes to `HelloWorld.js`:
** The file will be synchronized to the cluster
** `webpack` will perform hot module reloading
* Make some changes to `package.json`:
** The full build/push/deploy process will be triggered, fetching dependencies from `npm`


6 changes: 6 additions & 0 deletions examples/react-reload/app/.babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
2 changes: 2 additions & 0 deletions examples/react-reload/app/.dockerignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
*.swp
1 change: 1 addition & 0 deletions examples/react-reload/app/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
16 changes: 16 additions & 0 deletions examples/react-reload/app/Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
FROM node:alpine

WORKDIR /app
COPY package.json ./
RUN ["npm", "install"]

FROM node:alpine

WORKDIR /app

COPY --from=0 /app/node_modules node_modules

EXPOSE 8080
CMD ["npm", "run", "dev"]

COPY . .
10 changes: 10 additions & 0 deletions examples/react-reload/app/k8s/pod.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
apiVersion: v1
kind: Pod
metadata:
name: react
spec:
containers:
- name: react
image: gcr.io/k8s-skaffold/react-reload
ports:
- containerPort: 8080
26 changes: 26 additions & 0 deletions examples/react-reload/app/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "react-reload",
"version": "1.0.0",
"description": "A React demo application for skaffold",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --hot"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4"
},
"browserslist": "> 2%, not dead"
}
8 changes: 8 additions & 0 deletions examples/react-reload/app/src/components/HelloWorld.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import '../styles/HelloWorld.css';

export const HelloWorld = () => (
<div>
<h1>Hello world!</h1>
</div>
);
11 changes: 11 additions & 0 deletions examples/react-reload/app/src/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React demo app for skaffold</title>
</head>
<body>
<div id="root"/>
</body>
</html>
5 changes: 5 additions & 0 deletions examples/react-reload/app/src/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { HelloWorld } from './components/HelloWorld.js';

ReactDOM.render( < HelloWorld/>, document.getElementById( 'root' ) );
6 changes: 6 additions & 0 deletions examples/react-reload/app/src/styles/HelloWorld.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
h1 {
color: #27aedb;
text-align: center;
margin-top: 40vh;
font-size: 120pt;
}
27 changes: 27 additions & 0 deletions examples/react-reload/app/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const path = require( 'path' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {
entry: './src/main.js',
output: {
path: path.join( __dirname, '/dist' ),
filename: 'main.js'
},
devServer:{
host: '0.0.0.0'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ 'babel-loader' ]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [ new HtmlWebpackPlugin( { template: './src/index.html' } ) ]
};
13 changes: 13 additions & 0 deletions examples/react-reload/skaffold.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
apiVersion: skaffold/v1beta7
kind: Config
build:
artifacts:
- image: gcr.io/k8s-skaffold/react-reload
context: app
sync:
'src/components/*': src/components/
'src/styles/*': src/styles/
deploy:
kubectl:
manifests:
- 'app/k8s/**'
16 changes: 16 additions & 0 deletions integration/examples/react-reload/README.adoc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
=== Example: React app with hot-reload
:icons: font

Simple React app demonstrating the file synchronization mode in conjunction with webpack hot module reload.

==== Init
`skaffold dev`

==== Workflow
* Make some changes to `HelloWorld.js`:
** The file will be synchronized to the cluster
** `webpack` will perform hot module reloading
* Make some changes to `package.json`:
** The full build/push/deploy process will be triggered, fetching dependencies from `npm`


6 changes: 6 additions & 0 deletions integration/examples/react-reload/app/.babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
2 changes: 2 additions & 0 deletions integration/examples/react-reload/app/.dockerignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
*.swp
1 change: 1 addition & 0 deletions integration/examples/react-reload/app/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules/
16 changes: 16 additions & 0 deletions integration/examples/react-reload/app/Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
FROM node:alpine

WORKDIR /app
COPY package.json ./
RUN ["npm", "install"]

FROM node:alpine

WORKDIR /app

COPY --from=0 /app/node_modules node_modules

EXPOSE 8080
CMD ["npm", "run", "dev"]

COPY . .
10 changes: 10 additions & 0 deletions integration/examples/react-reload/app/k8s/pod.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
apiVersion: v1
kind: Pod
metadata:
name: react
spec:
containers:
- name: react
image: gcr.io/k8s-skaffold/react-reload
ports:
- containerPort: 8080
26 changes: 26 additions & 0 deletions integration/examples/react-reload/app/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "react-reload",
"version": "1.0.0",
"description": "A React demo application for skaffold",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --hot"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4"
},
"browserslist": "> 2%, not dead"
}
8 changes: 8 additions & 0 deletions integration/examples/react-reload/app/src/components/HelloWorld.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react';
import '../styles/HelloWorld.css';

export const HelloWorld = () => (
<div>
<h1>Hello world!</h1>
</div>
);
11 changes: 11 additions & 0 deletions integration/examples/react-reload/app/src/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React demo app for skaffold</title>
</head>
<body>
<div id="root"/>
</body>
</html>
5 changes: 5 additions & 0 deletions integration/examples/react-reload/app/src/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { HelloWorld } from './components/HelloWorld.js';

ReactDOM.render( < HelloWorld/>, document.getElementById( 'root' ) );
6 changes: 6 additions & 0 deletions integration/examples/react-reload/app/src/styles/HelloWorld.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
h1 {
color: #27aedb;
text-align: center;
margin-top: 40vh;
font-size: 120pt;
}
27 changes: 27 additions & 0 deletions integration/examples/react-reload/app/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const path = require( 'path' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );

module.exports = {
entry: './src/main.js',
output: {
path: path.join( __dirname, '/dist' ),
filename: 'main.js'
},
devServer:{
host: '0.0.0.0'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ 'babel-loader' ]
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [ new HtmlWebpackPlugin( { template: './src/index.html' } ) ]
};
13 changes: 13 additions & 0 deletions integration/examples/react-reload/skaffold.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
apiVersion: skaffold/v1beta7
kind: Config
build:
artifacts:
- image: gcr.io/k8s-skaffold/react-reload
context: app
sync:
'src/components/*': src/components/
'src/styles/*': src/styles/
deploy:
kubectl:
manifests:
- 'app/k8s/**'

3 comments on commit 4da9205

@adrian-gl
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey what skaffold version are u using for this,
sync just doesnt work for me on 0.26.0
i followed this example for angular ng serve, it doesnot sync, it rebuilds the container image

@corneliusweig
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adrian-gl v0.26.0 should be fine. Please also consider #1837 for your sync rules. To really help you, please give more context and open an issue.

@adrian-gl
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey @corneliusweig the *** syntax did the trick.
i hope it get added to a release.
works great sir. thanks

Please sign in to comment.