[Feedback Needed] Optimized production build and deployment

UPDATE: The proposal that’s currently under consideration can be seen here https://github.com/microsoft/WebTemplateStudio/issues/1209#issuecomment-553428712

---

---

Original: https://github.com/microsoft/WebTemplateStudio/issues/1124#issuecomment-544574101, https://github.com/microsoft/WebTemplateStudio/issues/1124#issuecomment-544590572, https://github.com/microsoft/WebTemplateStudio/issues/1124#issuecomment-544656829 , https://github.com/microsoft/WebTemplateStudio/issues/1124#issuecomment-545313551

---

Issue 1: At this moment all generated projects have 2 package.json files. For example react+node

Each package.json has its own utility:

• The one located at top dir . is for development
• The one located at ./server is for production

For deployment, i.e., VS Code Command: Web Template Studio: Deploy App that deploys the application in Azure App Service the following thing happens (extracted from https://github.com/microsoft/WebTemplateStudio/issues/1142#issuecomment-524402611 and https://github.com/microsoft/WebTemplateStudio/issues/1124#issuecomment-544590572):

1. npm install to install packages from ./package.json
2. npm run build to build frontend in production mode and place the output in server folder
3. deploy the server folder to Azure App Service.
4. npm install to install packages from ./server/package.json
5. run npm start located at ./server/package.json

Questions: Can we merge 2 package.json into one?

---

Issue 2: Another issue is the environment variables declared in .env file located at .. For example, vue+node+cosmosDB:

Note the require('dotenv').config() in ./server/slq/sqlClient.js.

Running npm start from ./package.json will successfully read the .env file. However, running npm start from ./server/package.json will produce an error because there in no .env file in server dir.

Questions: How to efficiently manage the environment variables and test locally the app both in dev and production modes?

---

Possible Solution: Create a single package.json. For example, something like this:

{
  "name": "react_node",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    // Only the things that are strictly necessary to run in production
    "cookie-parser": "^1.4.3",
    "debug": "~4.1.1",
    "morgan": "^1.9.1",
    "express": "^4.16.4",
    "body-parser": "^1.18.3"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    // All things necessary for development and to build frontend in production mode
    "concurrently": "^4.1.0",
    "nodemon": "^1.18.10",
    "bootstrap": "^4.3.1",
    "classnames": "^2.2.6",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "fs-extra": "8.1.0"
  },
  "scripts": {
    // Production scripts
    "start": "node ./server.js",
    // Development scripts
    "dev": "concurrently \"yarn start-frontend || npm run start-frontend\" \"yarn start-backend || npm run start-backend\"",
    "dev-backend": "nodemon server/server.js",
    "dev-frontend": "react-scripts start",
    "build": "node ./buildScript",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001",
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Then with a single package file we could have the following deployment flow:

1. npm install to install dependencies and devDependencies
2. npm run build to build frontend in production mode
3. Options:

• A) grab the built project and copy . (except node_modules) to the Azure App Service. There is no significant difference between copying server folder or copying . dir (for react+node it’s 1.5 MB vs 2.1 MB). Is there any “ignore” file like .npmignore but for Azure? It would solve this issue
• B) Modify the buildScript.js. Add a method that will move the package and .env from . to ./server. This way it will be locally testable.

1. npm install --production to install only the dependencies
2. run npm start

---

Opinions: I think it’s confusing to have 2 packages per project and that “1 project - 1 package” would be a much cleaner solution. Also, I would go for option 3.A

---

Anyway, what’s is the best way to manage and deploy the generated apps? @johnpapa since you’ve already provided your feedback to this project, can you take a look at this? What do you think?

[dgomezc]

Proposal for option 2: Separate package.jsons

We propose the following structure for the generated code and build output:

- .vscode: contains tasks and deployment info for app service extension.
- arm-templates: contains ARM Templates used for app service creation
- backEnd: contains backEnd Code
- frontEnd: contains frontEnd Code
- out : Folder that will be published, contains the server code + static website (build folder)

You can see a sample app with the proposed structure at https://github.com/dgomezc/StructureProposalApp

This allows us to have a clear separation of the backend and frontend code, each folder will have it’s own package.json file, providing its dependencies and scripts to start and build.

The out folder is initially empty and will be populated by the build scripts in the frontend and backend folder to contain the result of a frontend + backend build that can be deployed to Azure App Service.

The task.json file in the .vscode folder allows the dev to install dependencies, build and start front and backend together or separately using VS Code tasks.

A Readme.md file will explain the folder structure and contains all instructions to work with or without VSCode tasks.

This proposal also provides a uniform top level structure as suggested in https://github.com/microsoft/WebTemplateStudio/issues/1189

[AndreMaz]

I’m not a part of dev team so I can’t make the call. But as a contributor I would appreciate if you could share this. It would be really great