Is there a modelling language that can represent file structures?
I've seen examples like the one below, does it have a name? Is there a standardized format?
+-- file.txt
+-- folder
| +-- image.jpg
| +-- nested
| +-- program.exe
+-- index.html
Related
I'm working on getting a three-tier application running on Heroku. The backend is a Flask API with a React frontend. All works well locally and (ideally) I am trying to run both on the same server.
On deployment, I can access (public) API routes. However, at the index route I receive:
applicationName.herokuapp.com/:1
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
My directory setup is:
Deployment
+-- __pycache__
+-- venv
+-- .env
+-- .gitignore (currently empty)
+-- app.py
+-- config.py (contains python dictionary with details for mail/database config)
+-- database.db (sqlite, 1 entry)
+-- profile
+-- requirements.txt
+-- frontend
| +-- build
| +-- node_module
| +-- public
| +-- src
| +-- package.json
| +-- package-lock.json
| +-- webpack.config.js
requirements.txt was generated via pip freeze prior to deployment. frontend/build was generated via npm run build, again just prior to deployment.
I've tried various approaches and tweaks to both server and client with no success. I've seen approaches that involve moving build and/or package.json to the root directory, but this did not work. I feel like I'm missing something fairly simple but I cannot for the life of me figure it out.
Select code excerpts include:
app.py
app = Flask(__name__, static_folder='/frontend/build', static_url_path="/frontend/public/index.html")
#app.route('/test')
#cross_origin()
def test():
return 'success' #*applicationName*.herokuapp.com/test works correctly
#app.route('/')
#cross_origin()
def serve():
return send_from_directory(app.static_folder, 'index.html')
if __name__ == ("__main__"):
app.run(host='0.0.0.0')
procfile
web: gunicorn app:app --log-file=-
frontend/package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "https://*applicationName*.herokuapp.com/",
.env
FLASK_APP=app.py
FLASK_ENV=production
Hello I have a project that I inherited from others a while back. The project was originally built using AngularJS. I am currently attempting to prepare for migrating the project to Angular2. I was attempting to switch my controllers over to components. When I attempt to change
angular.module('main').controller...
to
angular.module('main').component...
it complains that the property 'component' does not exist on type 'IModule'
From my googling I suspect that it is tied to typings (the project is currently utilizing typescript) but I am having trouble figuring out how to update this. when I run npm list on the project the first few lines return
#types/angular#1.7.3
+-- #types/angular-ui-bootstrap#0.13.47
| `-- #types/angular#1.7.3 deduped
+-- angular#1.7.8
+-- angular-route#1.7.8
further down I have
| `-- typescript#1.6.2
obviously I did not originally set up this project so im learning how this whole set up works. Please let me know what further information is needed.
I am setting up a project has a structure like this:
components folder contains lots of React components.
examples folder is a folder uses components as a local dependency
So, right now, the package.json of examples is like this:
{
...
"devDependencies": {
"components": "../components"
...
}
}
And I want the example to recompile when I change the code in components.
Any idea how can I do this?
EDIT
My project structure is like this, and I am using webpack.
.
+-- components
| +-- index.js
| +-- package.json
+-- examples
+-- index.js
+-- package.json
If your project is using webpack then hot relaoding will work :https://webpack.js.org/concepts/hot-module-replacement/
Otherwise if it is just node you can use a server like nodemon eg:
$ npm install nodemon -g
$ nodemon app.js
This automatically pick up changes.
I have a problem when using a certain ant-design component: Dropdown.
The source code is written in ES6, and compiles fine using Babel.
When loading the page, the following error is thrown, and the page is not rendered:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `Dropdown`.
in Dropdown (created by Dropdown)
in Dropdown (created by DashboardTemplate)
in div (created by Col)
...
I'm using the code as listed in this Gist which has perfectly worked, but since some packages are updated doesn't work. I cannot reproduce the working version with downgrading all packages, due to the fact that dependencies of dependencies still are updated to a newer version. I can also not reproduce the problem in a Codepen example.
Dropdown is a ant-design component and used as instructed in the ant-design documentation.
Any clue what can cause this error?
Webpack is used as bundler, and installed package versions are:
$ npm ls antd react react-router react-dom prop-types webpack
E:\dashboard
+-- antd#2.11.2
+-- laravel-elixir-webpack-official#1.0.10
| +-- webpack#2.1.0-beta.22
| `-- webpack-stream#3.2.0 (git://github.com/jeroennoten/webpack-stream.git#d78a3568e259f9cdbc64c60290639af6ef6d3baf)
| `-- webpack#1.15.0
+-- prop-types#15.5.10
+-- react#15.6.1
+-- react-dom#15.6.1
+-- react-icons#2.2.5
| `-- react-icon-base#2.0.7
| `-- prop-types#15.5.8
+-- react-router#3.0.5
`-- webpack#2.6.1
Thanks!
I'm starting a new project under M*EAN Stack (MySQL) and was wondering about how to structure it, i'll use John Papa's Style Guide for an Angular project, it's pretty cool though, specially for the LIFT principle.
What is making a bit of trouble is Express, it has it's own MVC structure, it can handle routes, models, views, etc... but i want to handle that with Angular, i want Express just as a RESTful API.
A folder structure that i've been thinking to use is:
├── node_modules
├── app
│ ├── client
│ │ ├── app.module.js
│ │ ├── app.config.js
│ │ ├── users
| │ │ ├── users.module.js
| │ │ ├── users.config.js
| | | ├── admins.view.html
| | | ├── admins.controller.js
| | | ├── registered.view.html
| | | ├── registered.controller.js
| | | ├── guests.view.html
| | | ├── guests.controller.js
| | | ├── profile.directive.html
| | | ├── profile.controller.js
| | │ └── users.routes.js
│ │ ├── questions
| │ │ ├── questions.module.js
| │ │ ├── questions.config.js
| | | ├── list.view.html
| | | ├── list.controller.js
| | | ├── ask.view.html
| | | ├── ask.controller.js
| | | ├── detail.view.html
| | | ├── detail.controller.js
| | │ └── questions.routes.js
│ │ └──
│ ├── server
│ | └── ?
│ └── libs
| ├── angular
| ├── bootstrap
│ └── jquery
|
|
└── server.js
But actually i'm pretty sure if work with it like that, i really need a scalable structure, the application is pretty laaarge!. Some of my questions are:
What if i want to split Node(Express) server configuration to be able to scale? What would be an appropriate folder structure for that?
What does client and server folders mean in an app (i took them from some structures i saw for Express)?
If i use Angular, what is Express made for?
NOTE: I haven't include folders and files for bower, gulp, grunt, or things like that, i want to keep it as clean as possible, i know they simplify a lot of things, but i don't want to use them now, of course, if someone has a great argument to use them, please tell me.
I structure my express apps as described in Express Code Structure. I think the grouping you have under app/client looks good and you could just mirror that for the express server side portions of your app.