贴吧 React 最佳实践 - 推酷
贴吧 React 最佳实践
前端是个比较苦逼的工种，面临着一年一变的开发框架，一季一变的脚手架，一月一变工具库，这几年现已经发展到整个开发生态圈一年一变。
然而对于新技术的追求是一定要有的，毕竟唯一不变的东西就是变化，在互联网行业跟不上变化就等于淘汰。对于比较有开发经验的前端同学们来说，学习一项新的框架是非常轻松的，积极订阅技术周刊、看文档、逛github都可以使你迅速跟上前端变化的节奏。
回到现实，在大公司的大业务线，比如我所负责的百度贴吧，情况没有那么乐观。一个十多年的业务线所积累的业务代码是每一个个体无法想象，也无法掌控的，贴吧的前端代码几乎反应了整个前端历史的发展轨迹：在体系复杂的基础项目、林林种种的创新项目、变化多样的运营项目中，几乎所有博文中介绍过的优雅，神奇，黑科技的方法毫无例外都被使用过，框架集中在了jquery生态，是jquery时代混合php编程的经典范例。然而随着前端的发展，产品迭代的加速，旧的前端开发架构已经越来越无力。
在前后端分离开发方式早就被实践的今天，想在贴吧做一点点改变也会受到编译脚本、模块耦合，php全环境问题的困扰，任何小小的优化都会牵一发而动全身，于是我们开始了漫长的改造，从制作新的编译脚本，使用新开发流程，对fis通用化定制，以及后端UI层改为nodejs全方位辅助
前端模块化开发
，框架选用了React。
写到这里，应该总结一些为什么要使用React理由，毕竟前端变化那么快，为什么这么看好React呢？React不仅仅有非常优秀的模块化机制，普通的业务模块也能拆出来拥抱npm，更重要的是推出了虚拟dom思想，提高dom渲染效率，使得跨平台开发成为可能。也许在未来web app会替代native app（假设），可是虚拟dom更使后端渲染成为了可能，web app也需要借助虚拟dom的优势优化首屏用户体验。
Fis3 vs Webpack
fis3是完整的前端构建工具，webpack是前端打包工具，现在fis3也拥有了webpack对npm生态打包的能力，详情参考这篇文章：
让 fis3 拥有 webpack 的打包能力，只需要
fis-conf.js
添加如下配置：
// fis3 中预设的是 fis-components，这里不需要，所以先关了。
fis.unhook('components')
// 使用 fis3-hook-node_modules 插件。
fis.hook('node_modules', {
ignoreDevDependencies: true // 忽略 devDep 文件
假设我们将项目分为
，可以按需加载前端用到的文件：
fis.set('project.files', [
// client 按需加载
'/client/index.html',
// server 全部加载
'/server/**'
再将前端文件使用 typescript 编译:
fis.match('/client/**.{jsx,tsx}', {
parser: fis.plugin('typescript', {
module: 1,
如果上线后需要将文件发布到 cdn 域名下，可以动态替换，同时开启压缩等操作：
const production = fis.media('production')
production.match('*.{css,less,scss,sass,js}', {
domain: ''
// 压缩 css
production.match('*.{css,scss}', {
optimizer: fis.plugin('clean-css')
// 针对以下下文件，开启文件 hash
production.match('*.{ts,tsx,js,jsx,css,scss,png,jpg,jpeg,gif,bmp,eot,svg,ttf,woff,woff2}', {
useHash: true
// png 压缩
production.match('*.png', {
optimizer: fis.plugin('png-compressor')
// 压缩 js 文件
production.match('*.{js,tsx}', {
optimizer: fis.plugin('uglify-js')
生产环境需要压缩前端文件：
const pack = {
'/client/pkg/bundle.js': [
'/client/index.tsx',
'/client/index.tsx:deps'
'/client/pkg/bundle.css': [
// 依赖打包
production.match('::package', {
packager: fis.plugin('deps-pack', pack)
这样就将所有
依赖文件都打包到
/client/pkg/bundle.js
文件都打包到
/client/pkg/bundle.css
，同时fis3会自动替换html中的引用。
Yog2 vs express
yog2是基于express封装的nodejs UI层解决方案，
。主要特点使用了app拆分，使得协同开发变得方便。业务项目与node根项目分离，本地开发时，使用fis3的
能力提交到node根项目子项目文件夹中，保证不同业务项目的分离。
先安装yog2:
npm install yog2 -g
yog2 run -e dev
让项目上传到 yog2 根项目中，需要修改
fis-confg.js
production.match('*', {
charset: 'utf8',
deploy : [
fis.plugin('http-push', {
receiver: 'http://127.0.0.1:8080/yog/upload',
支持 bigpipe、quickling，以及
，默认支持mvc模式，自动路由:
/server/api/user.ts
default export
/[project-name]/api/user
开发中支持热更新，只要添加
参数，无需重启 node 就可以更新代码逻辑：
yog2 release --watch --fis3
Fit vs Antd
Fit和Antd类似，是一款基于commonjs规范的React组件库，同时提供了对公司内部业务线的定制组件，不同的是，Fit组件源码使用typescript编写，使得可维护性较强，由FEX团队负责维护（现在还未对外开放）。
除了提供通用的业务组件以外，还提供了同构插件
，这个组件提供了基于redux的同构渲染方法支持。
React 后端渲染企业级实践
先从业务角度解析一遍后端渲染准备工作，之后再解析内部原理。
后端模板的准备工作
对纯前端页面来说，后端模板只需要提供基础模板，以及各种
接口。为了实现后端渲染，需要根据当前(html5)路由动态添加内容放到模版中去，因此
fit-isomorphic-redux-tools
提供了封装好的
serverRender
server/action/index.ts
import * as React from 'react'
import routes from '../../client/routes'
import {basename} from '../../client/config'
import rootReducer from '../../client/reducer'
import serverRender from 'fit-isomorphic-redux-tools/lib/server-render'
import * as fs from 'fs'
import * as path from 'path'
// 读取前端 html 文件内容
const htmlText = fs.readFileSync(path.join(__dirname, '../../client/index.html'), 'utf-8')
export default async(req:any, res:any) =& {
serverRender({
rootReducer,
enableServerRender: true
server/router.ts
import initService from './service'
export default (router:any)=& {
router.use(function (req:any, res:any, next:any) {
/^\/api\//.test(req.path) ? next() : router.action('index')(req, res, next)
initService(router)
server/router.ts
说起，引入了 service（下一节介绍），对非
开头的 url 路径返回
server/action/index.ts
文件中的内容。
server/action/index.ts
这个文件引用了三个
目录下文件，分别是
路由定义、
此模块的命名空间、
rootReducer
redux 聚合后的 reducer。读取了
client/index.html
中内容，最后将参数全部传入
serverRender
函数中，通过
enableServerRender
设置是否开启后端渲染。如果开启了后端渲染，访问页面时，会根据当前路由渲染出对应的 html 片段插入到模板文件中返回给客户端。
在后端抽象出统一的 service 接口
server/service/index.ts
import {initService, routerDecorator} from 'fit-isomorphic-redux-tools/lib/service'
export default initService
class Service {
@routerDecorator('/api/simple-get-function', 'get')
simpleGet(options:any) {
return `got get: ${options.name}`
@routerDecorator('/api/simple-post-function', 'post')
simplePost(options:any) {
return `got post: ${options.name}`
@routerDecorator('/api/current-user', 'get')
async currentUser(options:any, req:any) {
return await setTimeout(() =& {
return 'my name is huangziyi'
new Service()
fit-isomorphic-redux-tools
还提供了两个工具
initService
export 出去供 router 绑定路由，
routerDecorator
是个装饰器，第一个参数设置 url 地址，第二个参数设置 httpMethod。定义一个 Service 类，每一个成员函数都是对应的后端 api 函数，支持同步和异步方法。最后创建一个 Service 的实例。
当通过 http 请求访问时，同步和异步方法是没有任何区别的，当请求从后端执行时，
不会发起新的 http 请求
，而是直接访问到这个函数，对异步函数进行异步处理，使得与同步函数效果统一。
自此后端模块介绍完毕了，可以对 service 进行自由拆分，例如分成多个文件继承等等。
前端模板文件处理
client/index.html
&!DOCTYPE html&
&html lang=&zh-cn&&
&div id=&react-dom&&&/div&
window.__INITIAL_STATE__ = __serverData('__INITIAL_STATE__');
&script type=&text/javascript& src=&./static/mod.js&&&/script&
&script type=&text/javascript& src=&./index.tsx&&&/script&
是为了支持 fis 的模块化寻找（webpack将类似逻辑预制到打包文件中，所以不需要手动引用），
是入口文件，需要通过
fis-conf.js
设置其为非模块化（仅入口非模块化），之后都是模块化引用：
fis.match('/client/index.tsx', {
isMod: false
window.__INITIAL_STATE__ = __serverData('__INITIAL_STATE__');
这段代码存在的意义是，后端渲染开启时，会替换
__serverData('__INITIAL_STATE__')
为后端渲染后的内容，在 redux 初始化时传入
window.__INITIAL_STATE__
参数，让前端继承了后端渲染后的 store 状态，之后页面完全交给前端接手。
前端入口文件处理
client/index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import routerFactory from 'fit-isomorphic-redux-tools/lib/router'
import routes from './routes'
import {basename} from './config'
import reducer from './reducer'
import './index.scss'
const router = routerFactory(routes, basename, reducer)
ReactDOM.render(router, document.getElementById('react-dom'))
fit-isomorphic-redux-tools
提供了方法
routerFactory
返回最终渲染到页面上的 React 组件，第一个参数是路由设置，第二个参数是项目命名空间（字符串，作为路由的第一层路径，区分子项目），第三个参数是 redux 的聚合 reducer。
routes 是非常单一的 react-router 路由定义文件：
client/routes.tsx
import * as React from 'react'
import {Route, IndexRoute} from 'react-router'
import Layout from './routes/layout/index'
import Home from './routes/home/index'
import PageA from './routes/page-a/index'
import PageB from './routes/page-b/index'
export default (
&Route path=&/&
component={Layout}&
&IndexRoute component={Home}/&
&Route path=&page-a&
component={PageA}/&
&Route path=&page-b&
component={PageB}/&
reducer也是基本的 redux 使用方法：
client/reducer.tsx
import {combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux'
// 引用各模块 reducer
import layout from './routes/layout/reducer'
// 聚合各 reducer
// 将路由也加入 reducer
const rootReducer = combineReducers({
routing: routerReducer,
layout: layout
export default rootReducer
config 文件是定义文件，将静态定义内容存放于此：
client/config.tsx
export const basename:string = '/my-app-prefix'
action、reducer
存放在 stores 文件夹下. actions 可共用，但对于复杂项目，最好按照 state 树结构拆分文件夹，每个文件夹下对应
action.tsx
。将 Redux 数据流与组件完全解耦。
特别对于可能在后端发送的请求，可以使用
fit-isormophic-redux-tools
client/stores/user/action.tsx
import fetch from 'fit-isomorphic-redux-tools/lib/fetch'
export const SIMPLE_GET_FUNCTION = 'SIMPLE_GET_FUNCTION'
export const simpleGet = ()=& {
return fetch({
type: SIMPLE_GET_FUNCTION,
url: '/api/simple-get-function',
name: 'huangziyi'
method: 'get'
然后在前端任何地方执行，它都只是一个普通的请求，如果这个 action 在后端被触发（比如被放置在 componentWillMount生命周期中），还记得 service 中这段代码吗？
@routerDecorator('/api/simple-get-function', 'get')
simpleGet(options:any) {
return `got get: ${options.name}`
会直接调用此方法。第一个参数是 params（get） 与 data（post） 数据的 merge，第二个参数是 req，如果在后端执行此方法，则这个 req 是获取页面模板时的。
将 redux 的 state 注入到组件的 props，还不熟悉的同学可以搜一搜 react-redux 教程。
组件的介绍为什么这么简单？因为有了
fit-isormophic-redux-tools
插件的帮助，组件中抹平了同构请求的差异。再次强调一遍，在任何地方调用 action ，如果这段逻辑在后端被触发，它会自动向 service 取数据。
fit-isomorphic-redux-tools 剖析
serverRender
// 后端渲染
export default(option:Option)=& {
// 如果不启动后端渲染,直接返回未加工的模板
if (!option.enableServerRender) {
return option.res.status(200).send(renderFullPage(option.htmlText, '', {}))
routes: option.routes,
location: option.req.url,
basename: option.basename
}, (error:any, redirectLocation:any, renderProps:any) =& {
if (error) {
option.res.status(500).send(error.message)
} else if (redirectLocation) {
option.res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
const serverRequestHelper = new ServerRequestHelper(service, option.req)
// 初始化 fetch
setServerRender(serverRequestHelper.Request as Function)
// 初始化 redux
const store = configureStore({}, option.rootReducer)
const InitialView = React.createElement(Provider, {store: store}, React.createElement(RouterContext, renderProps))
// 初次渲染触发所有需要的网络请求
renderToString(InitialView)
// 拿到这些请求的action
const actions = serverRequestHelper.getActions()
Promise.all(actions.map((action:any)=& {
return store.dispatch(action)
})).then(()=& {
const componentHTML = renderToString(InitialView)
const initialState = store.getState()
// 将初始状态输出到 html
option.res.status(200).send(renderFullPage(option.htmlText, componentHTML, initialState))
} catch (err) {
console.log('Server Render Error', err)
yog.log.fatal(err)
option.res.status(404).send('Server Render Error')
option.res.status(404).send('Not Found')
renderFullPage
方法，返回页面模板，可接收参数将后端渲染的内容填入其中，如果不开启后端渲染，无参调用此方法即可。
// 初始化 fetch
setServerRender(serverRequestHelper.Request as Function)
// 初次渲染触发所有需要的网络请求
renderToString(InitialView)
为了抹平前端请求在后端处理的差异，需要
renderToString
方法，上述代码是第一次。因为
方法在前后端都会调用，我们将
serverRequestHelper.Request
传入其中，当 action 在后端执行时，不会返回数据，而是将此 action 存放在
对象中，渲染完毕后再将 action 提取出来单独执行：
const actions = serverRequestHelper.getActions()
Promise.all(actions.map((action:any)=& {
return store.dispatch(action)
因为 react 渲染是同步的（vue2.0 对此做了改进，可谓抓住了 react 的痛点），对异步操作无法处理，因此需要多渲染一次。这时，redux 的 store 中已经有了动态请求所需的数据，我们只需要再次渲染，就可以获取所有完整数据了：
const componentHTML = renderToString(InitialView)
const initialState = store.getState()
// 将初始状态输出到 html
option.res.status(200).send(renderFullPage(option.htmlText, componentHTML, initialState))
promise-moddleware
export default (store:any) =& (next:any) =& (action:any) =& {
const {promise, type, ...rest} = action
// 没有 promise 字段不处理
if (!promise) return next(action)
const REQUEST = type + '_REQUEST'
const SUCCESS = type + '_SUCCESS'
const FAILURE = type + '_FAILURE'
if (process.browser) {
next({type: REQUEST, ...rest})
return promise.then((req:any) =& {
next({data: req.data, type: SUCCESS, ...rest})
return true
}).catch((error:any) =& {
next({error, type: FAILURE, ...rest})
console.log('FrontEnd PromiseMiddleware Error:', error)
return false
const result = promise(action.data, action.req)
if (typeof result.then === 'function') {
return result.then((data:any) =& {
next({data: data, type: SUCCESS, ...rest})
return true
}).catch((error:any) =& {
next({error, type: FAILURE, ...rest})
console.log('ServerEnd PromiseMiddleware Error:', error)
return false
return next({type: SUCCESS, data: result, ...rest})
篇幅原因，默认大家了解
。这里有个约定，action 所有异步请求都放在 promise 字段上，dispatch 分为三个状态 （_REQUEST，_SUCCESS，_FAILURE）。前端请求都是异步的，因此使用
promise.then
统一处理，后端请求因为直接访问 model ，异步时，与前端同样处理，同步时，直接调用 promise 函数获取结果。还记得
server/service/index.ts
文件中为何能支持普通方法，与
方法吗？因为这里分开处理了。
const services = new Map()
export default services
export const routerDecorator = (url:string, method:string) =&(target:any, key:string, descriptor:any)=& {
services.set(url, {
value: descriptor.value,
method: method
return descriptor
export const initService = (router:any)=& {
for (let key of services.keys()) {
const target = services.get(key)
router[target.method](key, async(req:any, res:any)=& {
let params:any = {}
if (target.method === 'get') {
params = req.query
_.assign(req.body || {}, req.query || {})
const result = await target.value(params, req)
res.json(result)
这里有两个函数，将 service 层抽象出来。
routerDecorator
装饰器用于定义函数的路由信息，
initService
将 service 信息初始化到路由中，如果是
请求，将 query 参数注入到 service 中，其它请求会对 query 与 body 参数做 merge 后再传给 service。
React 组件生态降低了团队维护成本，提高开发效率，同时督促我们开发时模块解耦，配合 redux 将数据层与模版层分离，拓展了仅支持 view 层的 React。后端渲染大大提高了首屏效率，大家可以自己规划后端渲染架构，也可以直接使用
fit-isormophic-redux-tools
目前来看，React 后端渲染的短板在于
RenderToString
是同步的，必须依赖两次渲染才能方便获取异步数据（也可以放在静态变量中实现一次渲染），对于两层以上的异步依赖关系处理起来更加复杂，这需要 React 自身后续继续优化。当然，任何技术都是为了满足项目需求为前提，简单的异步数据获取已经可以满足大部分业务需求。
webpack只是个打包工具，我们不要过分放大它的优势，一个成熟的业务线需要 gulp 或者 fis3 这种重量级构建工具完成一系列的流程，如今 fis3 已经支持 npm 生态，正在不断改造与进步。对 express 熟悉的同学，转到企业开发时不妨考虑一下 yog2，提供了一套完整的企业开发流程。
如有遗误，感谢指正。
贴吧一起嗨，由 FEX 团队助力打造，下面提供了开启后端渲染/关闭后端渲染的链接地址，方便大家调试比对性能。
，开启后端渲染
，关闭后端渲染
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致Using XAMPP for Local WordPress Theme Development
Using XAMPP for Local WordPress Theme DevelopmentBy Jacob Gube
In this tutorial,
you’ll learn how to install and configure XAMPP for the desktop. Once that’s
out of the way, we’ll install WordPress so that you can have
your very own professional, light-weight PHP and WordPress development environment.
Introduction
To sum it up in one sentence: , which stands for Cross-Platform (X) Apache, MySQL, PHP and Perl,
is a popular, free and open source web server package that you can use to
install a web server onto your desktop.
XAMPP allows you to develop PHP and Perl-based server-side
scripting applications without the need for a remote web server, offering you
the opportunity to work faster, develop stuff more securely, and work on your
apps without an internet connection.
In this tutorial – you’ll see exactly how XAMPP can do
splendid things to your development cycles.
We’re going to use a simple xampple (sorry, I had to get that out of the way, been thinking
about saying that for a long time): we’re going to install XAMPP and WordPress
with some test data to have WordPress right on our desktop.
This tutorial is for Windows Vista, so you’ll have to tweak
the steps involved depending on your operating system. Here’s what you’ll be doing in this tutorial:
Objectives
Downloading and Installing XAMPP
Starting up your Apache and MySQL services
Installing and configuring WordPress locally
Creating a MySQL database for WordPress
Creating a MySQL database user for WordPress in phpMyAdmin
Importing some test data for WordPress using an XML file
This tutorial covers installing XAMPP in Windows Vista, so
you’ll have to tweak the steps a little bit if you’re using a different
operating system.
Obtaining XAMPP and choosing a version
1 Obtain a copy of XAMPP for Linux, Windows, or Mac OS
X at the .
http://www.apachefriends.org/en/xampp.html
2 Choose the package you want: for normal web
development, just go with the Basic
The Basic Package comes with a host of useful applications,
libraries, and extensions such as
we’ll use to set up WordPress later on) and
(a popular PHP caching application to optimize and improve PHP script
performance). For this tutorial, choose the Installer version.
Download it (Save
File) onto your computer.
3 Open up the executable (for Windows users, it’s called xampp-win32-1.7.1-installer.exe).
The following figure shows
it asks you
to select which language you want to use.
The next dialog you’ll see is the first page of the XAMPP Setup Wizard.
4 Pick a destination for the installation.
Note: XAMPP
suggests not to install it in the Program Files folder (i.e. C:\Program Files\xampp), so just
install it in the root of your drive (C:\xampp)
5 Configure your options in the XAMPP Options dialog box. For this tutorial, just go with the
default installation options.
That’s it for the installation, quick and painless wasn’t
it? Let’s fire up Apache and MySQL.
Starting up your Apache and MySQL services
6 After the installation, you should’ve been presented
with an option that asks you to open the XAMPP
Control Panel. If you didn’t get that option, do one of the following:
Option 1: Navigate to it using the Windows interface
Start & All Programs & Apache Friends & XAMPP &
XAMPP Control Panel
Option 2: Open the XAMPP Control Panel directly
If you didn’t select the &Create Shortcut& option
in the installation, then navigate to the XAMPP installation folder and open
the file called xampp-control.exe.
7 The XAMPP Control Panel should look like the
following figure:
8 Click the Start button beside Apache. If you’re on Windows, you’ll get a Windows Firewall
warning: choose Unblock.
9 If all goes well, you should see the XAMPP Control
Panel log updated with &Apache Started&, and &Running& with
a green background right beside the Apache service.
10 Start the MySQL service using the same method as
Testing to see if it works
11 With your Apache and MySQL services started, open
up a web browser and navigate to localhost using the following path:
http://localhost
12 You should see the following screen:
Congratulations, you now have your very own locally hosted
(localhost) web server!
Depending on your operating system, you’re now the proud
owner of a
(Mac OS X users)
(badass Linux users) server right there inside your computer.
Now let’s move onto installing WordPress on your machine.
First, we’re going to set up your WordPress MySQL database and create a MySQL
database user for it. That’s the topic for the next section.
Setting up your MySQL database for WordPress
The easiest way to create a MySQL database using XAMPP would
be to use phpMyAdmin, which comes with the Basic Package that we installed.
13 Navigate to phpMyAdmin through your web browser.
The URL is:
http://localhost/phpmyadmin/
14 Create your WordPress database by entering in a
name and pressing the Create button.
In this tutorial, we’ll call it wordpress_db. You’ll need to remember this value for a later step
when we configure WordPress.
This is what the following screen will look like:
Creating a WordPress database user
In real-world scenarios, you should never use the default root user because it has all privileges and you don’t want a
simple WordPress bug or vulnerability taking down your entire MySQL service.
This isn’t necessary if you’re only testing locally, but we’re
going to do this right to promote best practices.
15 Go to phpMyAdmin home by either clicking on the
logo on the top left or clicking on the home icon.
16 Click on the Privileges tab.
17 Click on &Add
a New User&
18 For the User name field, type in any name, this
tutorial uses wordpress_user for
simplicity. For Host, select Local.
For Password, type in a value, but it’s highly recommended
that you use the Generate Password button to randomly generate a password for better security.
Once you hit the Generate Password button, click on Copy button right beside it to copy it
automatically in the Password and Re-type fields.
Important: take a
note of the User name and Password you used, we’ll be using it later on.
Here are the settings used:
19 Set the Global
Privileges of wordpress_user. Typically, you should try to limit the privileges
of your database users to a minimum to improve security.
For this example, since it’s a local installation – just
check all of them. When you go into
production, pare down the privileges!
Hit the Go button
to create the database user.
20 If everything went well, you’ll see a confirmation
that you’ve created the user successfully.
Adding your newly created user to your database
21 In the next screen, in the Database-specific privileges fieldset, in the Add privileges on the following database field, select wordpress\_db.
This will add wordpress_user as a database user of your
wordpress table, wordpress_db.
22 Check that wordpress_user has been added to the
database by entering your database.
To enter your database, click on wordpress_db in the
left-hand navigation.
23 Click the Privilege tab to see all users that have
access to your WordPress database. You should see wordpress_user listed in the
Privilege section.
Alright, you’ve just learned how to create a MySQL database
user using phpMyAdmin. Give yourself a pat in the back before moving on!
Installing WordPress on your computer
If you’re not familiar with the process of installing
WordPress, you should take a look at the following guide on the official
WordPress.org site first:
This guide will get you up and running with the general
process that we’ll be taking. Please take a moment and read it – I promise,
it’ll be quick and painless.
24 Download the , save it
on your computer.
25 Open your xampp folder. Navigate to the htdocs folder.
If you used the default installation destination, the file
C:\xampp\htdocs
26 Open up the WordPress ZIP file you downloaded.
Extract the entire contents in the htdocs folder.
Configuring WordPress: entering your MySQL database information
27 Inside the wordpress folder, open wp-config-sample.php file using your
favorite text editor.
Fill in the information with your database information. If you followed along and used the same values as this
tutorial, you can use these values:
/** The name of the database for WordPress */
define('DB_NAME', 'wordpress_db');
/** MySQL database username */
define('DB_USER', 'wordpress_user');
/** MySQL database password */
define('DB_PASSWORD', 'typeyourpasswordhere');
/** MySQL hostname */
define('DB_HOST', 'localhost');
28 Once you’re done with the configuration file, save
it as wp-config.php in the same
Note: You have to
save it as wp-config.php and not
wp-config-sample.php.
Running the WordPress install script
29 To finish the installation of WordPress, navigate
to the . Here’s the file path:
http://localhost/wordpress/wp-admin/install.php
30 If you did everything correctly, you should be
greeted by the following screen:
31 Just hit the Install
WordPress button, and follow the steps. If this is your first WordPress installation,
read the steps of the installation dialog carefully as we won’t be covering it
here in detail.
Testing to see if your WordPress installation works
32 Navigate to the
of your WordPress
installation. The file path is:
http://localhost/wordpress/
If everything went well, you should see the default
WordPress home page:
Important: take a
note of the auto-generated password or else you won’t be able to log into
WordPress.
WordPress local installation completed!
Woot, you just installed WordPress on your computer! No more
FTP’ing or live web development! You can now test your themes or test site
updates before going live.
At this stage, you can log into the WordPress administration
http://localhost/wordpress/wp-admin
Alternatively, you can continue in the tutorial (because
we’re not done yet).
Next, we’re going to import some test data which you should
do when you’re developing WordPress themes to be released to the public.
Importing WordPress test data
33 Download the WordPress XML file from the official
WordPress.org site. You can get it through the
(which is a great guide by the way), under the
Here’s the direct download link:
/wpcom-themes/test-data..xml
34 Log into the WordPress administration section:
http://localhost/wordpress/wp-admin
35 In the WordPress admin section, go to Tools &
Import (using the sidebar navigation on version 2.7).
36 In the Import page, click on WordPress.
37 Browse to the XML file we downloaded (test-data.xxxx-xx-xx.xml).
Hit the Upload file
and Import button.
38 Assign the authors of the post. The XML file
created a testing author named Noel
Jackson for you.
If you don’t want to assign the test posts to Noel Jackson,
use the or map to existing field and
select the author you want. For this tutorial, assign it to admin.
Click the Submit button.
39 You’ll be presented with a log of all the changes
made by the import process. Examine it if you want to see exactly what
40 Check to see if the import went according to plan.
Easiest way is to go to the home page of your WordPress installation ().
41 In the home page, you’ll see that there’s now
content for your WordPress installation. This way you can easily check and test
your theme for public release.
You’re done, you professional PHP/WordPress developer!
Now you can develop WordPress themes and test changes
locally on your computer, just like the pro’s, not only speeding up your
development cycles, but also being able to securely test updates to your
existing themes.
Where to go from here
Here are things you should try and do to explore XAMPP:
Try to install a free WordPress theme
section for themes you’d like to try out. Alternatively, check out our lists of free WordPress themes:
Create a new site
Create a folder under the xampp & htdocs and put some
test PHP scripts in it. As you can see, you don’t need a web server anymore, you
have a fully-featured MySQL and PHP server right there in your computer. Go
develop some cool web applications!
Explore additional XAMPP add-ons
There are a good number of XAMPP add-ons for you to extend
your local web server. Check them out and install the ones you need. Go to
either the , , or
pages to see a list of add-ons you can install.
In this tutorial, you just learned how easy it is to install
XAMPP to the desktop so that you can have your very own PHP web development
testing server. More specifically, this is what we did together:
Installed XAMPP
Started the Apache and MySQL Services
Created a MySQL database
Created a MySQL database user
Installed and configured WordPress
Imported some test data
Further resources
on Free Mac Blog.
Installing
XAMPP on Linux
Learn more about XAMPP in the
Discover phpMyAdmin and how to use it in the
official site.
Report a bug or provide some feedback, why don’t you?
Feel free to provide feedback and ask questions (lots of
them!) in the comments. Mistakes
happen – so please let us know if we made a mistake or you see an error.
Related content
Related categories: , ,
This comment section is closed. Please
if you have important new information about this post.