Нет ничего лучше, чем разместить свое приложение, чтобы мир мог оценить вашу работу и испытать на себе ее влияние. Но каждый в какой-то момент сталкивался с тем или иным препятствием, чтобы продолжить то же самое. Я сам устранил несколько препятствий, чтобы мои материалы начали работать, и это дало мне мотивацию поделиться с вами этой проблемой и, надеюсь, решить ее.
Предварительные условия для понимания решения: -
- Функционирующее приложение React на локальном хосте
- Аккаунт на Heroku
- Использование Semantic-UI в качестве основы дизайна (не предварительное требование, а просто сценарий)
- Приложение React создается с помощью веб-пакета (есть несколько отличных блогов, посвященных тому же решению «create-react-app»)
Если ваше приложение React еще не готово, перейдите по следующей ссылке, которая прекрасно иллюстрирует запуск вашего проекта на локальном хосте: -
После выполнения приведенного выше руководства ваш webpack.config.js может выглядеть примерно так: -
const HtmlWebPackPlugin = require("html-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, 'dist'),
filename: "bundle.js",
sourceMapFilename: 'bundle.map'
},
devtool: '#source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['env', 'react', 'stage-0']
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new UglifyJSPlugin()
],
devServer: {
historyApiFallback: true,
inline: true,
contentBase: './dist',
port: 5000
}
}
Объект devServer помогает нам настроить номер порта и указать папку dist для запуска. На данный момент вы можете удалить этот объект из своего webpack.config.js, чтобы ваше приложение могло работать на порте по умолчанию 8080.
И наш package.json должен выглядеть примерно так: -
{
"name": "socialsnu2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"less-loader": "^4.1.0",
"path": "^0.12.7",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.12.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
}
}
Теперь соберите проект, чтобы получить каталог dist: -
npm run build
После того, как наше приложение React запущено и работает (по крайней мере, на локальном хосте), вы можете вносить изменения в это настроенное приложение, создавать компоненты и делать с ними все, что хотите.
Если вы планируете использовать Semantic-UI, просто выполните следующие команды из корневого каталога вашего проекта, чтобы включить его: -
npm i semantic-ui
Появятся некоторые варианты, выберите: -
- выражать
- да
- ‘Press Return’
- ‘Press Return’
- No
- No
- ‘Press Return’
Это успешно создаст каталог «семантический /» в вашем корневом каталоге.
myProjectDirectory ├── data ├── dist ├── node_modules ├── package.json ├── package-lock.json ├── semantic ├── semantic.json ├── src └── webpack.config.js
Каталог «data» состоит из мультимедийных файлов, таких как изображения или некоторых данных JSON для справки.
Далее мы переходим к построению семантики.
Теперь измените каталог на семантический и создайте его.
cd semantic gulp build
После того, как мы построили семантику, некоторые файлы нам больше не нужны, и поэтому мы можем их удалить.
semantic ├── dist ├── gulpfile.js ├── src └── tasks
«Dist» - единственный каталог, который нам нужен, а остальные сделали свое дело.
rm -r src rm -r tasks rm gulpfile.js
Также удалите «семантический» из своего «package.json», а также удалите файл «semantic.json» из корневой папки. Если этого не сделать, могут возникнуть конфликты при сборке нашего проекта «heroku».
Теперь у нас есть работающее приложение React на локальном хосте (выполните npm start). И мы готовы приступить к его развертыванию на героку.
Перед развертыванием нам необходимо выполнить несколько шагов:
Теперь мы создадим экспресс-сервер, который при запуске будет выполнять содержимое папки «dist». Перед созданием нашего мини-экспресс-сервера убедитесь, что вы переместили свои каталоги «data» и «semantic» в каталог «dist». Любой другой каталог, от которого зависят ваши компоненты и который не находится в каталоге «src», должен быть помещен в каталог «dist». Иногда перемещение их в каталог «src» перед сборкой «dist» также работает, но во многих случаях это не так.
Каталог проекта теперь должен выглядеть примерно так: -
myProjectDirectory ├── dist ├── node_modules ├── package.json ├── package-lock.json ├── src └── webpack.config.js
Теперь создайте файл «server.js» в корневом каталоге, который будет содержать наш экспресс-сервер, который будет выглядеть так: -
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'dist')));
app.set('port', process.env.PORT || 8080);
const server = app.listen(app.get('port'), function () {
console.log('listening on port ', server.address().port);
});
Разбивая два основных утверждения:
app.use(express.static(path.join(__dirname, 'dist')));
. Это отобразит содержимое каталога «dist» и не имеет отношения к каким-либо другим каталогам, которые находятся в нашем корневом каталоге.
app.set('port', process.env.PORT || 8080);
. Динамически устанавливает ваш порт на порт, предоставленный процессом (heroku), в противном случае будет 8080.
Измените свой стартовый скрипт на: -
"start": "node server.js"
Теперь каждый раз, когда вы выполняете «npm start», этот файл server.js будет выполняться и запускать процесс. Первоначально мы избегали этого, поскольку это не обеспечивает возможности горячей перезагрузки при изменении любого типа контента в нашем приложении.
Мы готовы развернуть наше приложение на heroku.
Следуйте документам «heroku», чтобы завершить сделку: -
Https://devcenter.heroku.com/articles/getting-started-with-nodejs
Вот и все, ваше приложение работает :)
PS: Это мой первый технический блог на Medium. Я мог сделать много ошибок выше. Буду очень признателен за вашу помощь в их исправлении.
