1. Create a new directory for your project and navigate to it using your terminal.
mkdir my-ap cd my-appp
2. Create a new `package.json` file for your project by running the following command:
npm init -y
3. Install the necessary dependencies for your React.js and Node.js application:
npm install express react react-dom
4. Create a new `index.js` file in your project directory and add the following code:
const express = require('express')
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(3000, () => {
console.log('App listening on port 3000!');
});5. Create a new `public` directory in your project directory and add a new `index.html` file with the following code:
<!DOCTYPE html>
<html>
<head>
<title>React.js and Node.js Docker Image</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>6. Create a new `src` directory in your project directory and add a new `App.js` file with the following code:
import React from 'react';
const App = () => {
return (
<div>
<h1>React.js and Node.js Docker Image</h1>
<p>Welcome to my React.js and Node.js Docker Image tutorial!</p>
</div>
);
}
export default App;7. Create a new `index.js` file in your `src` directory and add the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));8. Install the necessary development dependencies by running the following command:
npm install webpack\
webpack-cli\
webpack-dev-server\
babel-loader\
@babel/core\
@babel/preset-env\
@babel/preset-react
--save-dev9. Create a new `webpack.config.js` file in your project directory and add the following code:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
}, ],
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
port: 3000,
},
};;10. Build your React.js and Node.js application by running the following command:
npx webpack
11. Create a new `Dockerfile` in your project directory and add the following code:
FROM node:latest WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npx webpack EXPOSE 3000 CMD ["node", "index.js"]
12. Build your Docker image by running the following command:
docker build -t my-app .
13. Run your Docker image by running the following command:
docker run -p 3000:3000 my-app
14. Open your web browser and visit http://localhost:3000 to see your React.js and Node.js application running inside the Docker container.
That's it! You've successfully created a Docker image for your React.js and Node.js application.
copy from:
https://www.linkedin.com/pulse/how-create-docker-image-reactjs-nodejs-urvish-gajjar/
Comments
Post a Comment