请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

pdillon/koa-react-app: Starter project that combines create-react-app with a Koa ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

pdillon/koa-react-app

开源软件地址:

https://github.com/pdillon/koa-react-app

开源编程语言:

JavaScript 95.9%

开源软件介绍:

koa-react-app

Starter project that leverages create-react-app with a Koa service. 10 easy (and tedious) steps!

Setup

  1. Install deps

     yarn add --dev react-scripts babel-preset-env babel-cli nodemon
     yarn add react react-dom
     yarn add koa koa-router@next koa-static koa-bodyparser
    
  2. Create src paths

     mkdir ./src && mkdir ./src/service
    
  3. Copy out react-scripts template folders

     cp -r ./node_modules/react-scripts/template/src ./src/client
     cp -r ./node_modules/react-scripts/template/public ./public
    
  4. Add scripts section to package.json

     "scripts": {
       "eject": "react-scripts eject",
       "start": "yarn build:client && yarn build:service && yarn start:service",
       "start:dev": "(yarn build:service && yarn start:service:dev) & yarn watch:client & yarn watch:service",
       "build:client": "node ./scripts/build.js",
       "watch:client": "node ./scripts/start.js",
       "start:service": "node ./lib/service/index.js",
       "start:service:dev": "nodemon ./lib/service/index.js",
       "watch:service": "NODE_ENV=development babel --watch ./src/service -d ./lib/service",
       "build:service": "NODE_ENV=production babel ./src/service -d ./lib/service"
     }
    
  5. Run "eject".

     yarn eject
    
  6. Update ./config/paths.js to match new src/client folder

     // config after eject: we're in ./config/
     module.exports = {
       appBuild: resolveApp('build'),
       appPublic: resolveApp('public'),
       appHtml: resolveApp('public/index.html'),
       appIndexJs: resolveApp('src/client/index.js'),
       appPackageJson: resolveApp('package.json'),
       appSrc: resolveApp('src/client'),
       yarnLockFile: resolveApp('yarn.lock'),
       testsSetup: resolveApp('src/client/setupTests.js'),
       appNodeModules: resolveApp('node_modules'),
       nodePaths: nodePaths,
       publicUrl: getPublicUrl(resolveApp('package.json')),
       servedPath: getServedPath(resolveApp('package.json'))
     };
    
  7. Add an index.js file to ./src/service with the following code

     import Koa from 'koa';
     import koaStatic from 'koa-static';
     import KoaRouter from 'koa-router';
     
     const app = new Koa();
     const router =  new KoaRouter();
     
     router.get('/api/test', async (ctx) => {
        ctx.body = {
          data: 'Api test successful'
        };
     });
     
     app.use(router.routes());
     app.use(koaStatic('./build'));
     
     const port = 4000;
     
     app.listen(port, () => {
       console.log(`Service started on port ${port}`);
     });
    
  8. Add a .babelrc file to ./src/service

     {
       "presets": [
         ["env", {
           "targets": {
             "node": "current"
           }
         }]
       ]
     }
    
  9. Add a "proxy" entry to package.json

     "proxy": "http://localhost:4000"
    
  10. Run yarn start:dev or yarn start




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap