---
tags: JavaScript, website, fun
---
JS Website
===
1. Install Node.js to get access to npm
2. npm install webpack webpack-cli
3. npm run build
4. npm install -g webpack-dev-server
5. npm install copy-webpack-plugin --save-dev
6.
To run a React app, you will need the following:
Node.js: React is built on top of Node.js, so you will need to install Node.js on your computer to be able to run a React app. You can download and install Node.js from the official website: https://nodejs.org/en/.
Code editor: You will also need a code editor to write and edit your React code. Some popular code editors for React development include Visual Studio Code, Atom, and Sublime Text.
React dependencies: Once you have Node.js installed, you can use the Node Package Manager (npm) to install the React dependencies for your project. You can do this by running the following command in your terminal:
```
npm install react react-dom
```
Create React App: Create React App is a tool that sets up a new React project with a basic file structure and development environment. You can install it globally on your system by running the following command:
lua
Copy code
```
npm install -g create-react-app
```
After installing Create React App, you can create a new React project by running:
```
create-react-app my-app
cd my-app
```
These steps will create a new React app with all the necessary dependencies and a basic file structure. You can then start the development server by running:
```
npm start
```
This will launch the app in your default browser, and you can begin developing your React app!
To make a basic website
Make file: `script.js`
```
console.log("Hello, world!");
```
Make html file, `index.html`
```
<!DOCTYPE html>
<html>
<head>
<title>Mastiff SRA Search</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first JavaScript website.</p>
</body>
</html>
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: './src/index.ts',
devtool: 'source-map',
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
port: 9001,
hot: true,
},
module: {
rules: [
{
test: /\.worker\.ts$/,
loader: 'worker-loader',
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: 'lit-css-loader',
options: {
import: 'lit', // defaults to lit-element
},
},
{
test: /\.(png|jpg|gif)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
},
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
output: {
filename: 'mgnify-sourmash-component.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
title: 'MGnify Sourmash Component - EBI',
}),
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
util: 'util',
stream: 'stream',
}),
],
experiments: {
syncWebAssembly: true,
},
};
Sign in with Wallet
Connect another wallet