I currently have a Node.js project with this file structure:
strava-descriptions/
├── .DS_Store
├── .env
├── .eslintrc.js
├── .git
├── .gitignore
├── authorizeStrava.js
├── buildDescription.js
├── config.js
├── db.js
├── getActivity.js
├── getSongsPlayedDuringActivity.js
├── getSpotifyAccessToken.js
├── getSpotifyRecentlyPlayed.js
├── getStravaAccessToken.js
├── getWeatherConditions.js
├── handleWebhookEvent.js
├── node_modules
├── package-lock.json
├── package.json
├── server.js
└── updateDescription.js
The parent folder strava-descriptions is its own GitHub repository and is also deployed to Heroku.
What I want to have happen is to put all of these files into a sub-directory called backend, and create a new frontend folder in strava-descriptions to house a React front end. However, I know that using create-react-app will create its own git repo inside the frontend folder.
My question is, how do I accomplish this without totally messing up my Heroku deployment and current GitHub repo? Ideally I would like to have one complete project on GitHub (frontend and backend together), but have them deployed and functioning as two separate apps.
One approach is to use create-react-app to initialize you project and then just paste the files on your old repository, reorganize the files and then you can manage you builds for react with npm
Related
The problem is that let's say I want to start multiple services (several npm start) concurrently, it would be inconvenient to run the services as separate projects. I want to have a folder structure similar to the following under one project workspace:
project
├── service1
│ ├── node_modules
│ │ ├── #module1
│ │ └── #module2
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── src
├── service2
│ ├── node_modules
│ │ ├── #module1
│ │ └── #module2
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── src
└── service3
├── node_modules
│ ├── #module1
│ └── #module2
├── package-lock.json
├── package.json
├── public
└── src
What would be a clean way to do so? I need to start multiple services together and obviously debug any in a convenient fashion if a possibility exists.
You may want to look into Lerna or Nx.
Both are tools that manage mono-repo microservices.
There are some subtle differences between them, but essentially both do the same thing.
They offer ways to share dependencies between your microservices.
They offer ways to created shared libraries.
They offer ways to launch
multiple services together.
Lerna
One of the subtle differences, is that Nx will force you to use a single package.json in your root folder, essentially forcing you to use the same dependencies for all microservices. By contrast, Lerna still allows a specific package.json in each individual folder, which seems to resemble your current directory structure better.
In general, I think Lerna is a safe choice. And you can find a good tutorial here.
Nx
On the other hand, even though Lerna has been around for a longer time it has some quirks at times. I believe Nx is probably technically a more robust solution.
However, I must admit that I've mostly seen it being used for mono-repo front-end projects, and less often for back-ends. Technically, it should be able to handle both.
To get you started with Nx, you could follow this tutorial.
Spoiler: Nx has commands like nx run-many that can help you to execute multiple services together. After migrating to nx, you could then put that command in your "start": script of the package.json, so that npm run start and npm start will execute it.
I am making a package that uses flask. I will be using a single command to create the project. For the flask application to run properly, I want the following directories in the user's local directory-
├── main.py
├── requirements.txt
├── static
│ └── style.css
├── templates
│ └── index.html
How do I package the code so that I am able to store these files in the user's local directory?
I'm interested in learning how the #shopify/polaris project in github is built and published to npm. My main questions are:
How are the index.es.js and index.js files being generated? Are those being generated programmatically on my computer, or are they published to npm like this?
What mechanism is preventing the files in the github repo from being downloaded when installed? I don't see a .npmignore in the repo.
Below I have the files in the npm package, and the github, and you can see they're different.
Here's what the polaris project looks like when it's installed via NPM / yarn.
.
├── CHANGELOG.md
├── README.md
├── index.es.js
├── index.js
├── package.json
├── src
├── styles
├── styles.css
├── styles.scss
└── types
Here's what the project looks like on github.
.
├── CHANGELOG.md
├── README.md
├── circle.yml
├── config
├── documentation
├── examples
├── package.json
├── scripts
├── src
├── tests
├── tsconfig.json
├── tslint.json
└── yarn.lock
We use Rollup to generate the different entry files for Polaris. You can see our generic config file here: https://github.com/Shopify/polaris/blob/master/config/rollup/index.js. Note that it does all the work of compiling our TypeScript source files (using TypeScript and Babel), as well as kicking off the work required to bundle our CSS and icons as appropriate. This config generator is then run three times, which you can see here: https://github.com/Shopify/polaris/blob/master/scripts/build.js#L36-L38
The main entry file (.js, and spits out the CSS for our CDN)
The module entry file (.es.js)
The embedded entry file
We then copy these into their final locations for the NPM publish.
As for how we control what files are in the NPM package, we use the files key in our package.json; these are the relevant lines.
I have a node.js app using a single git repo, that has various packages. I am trying to make things modularized, and separate.
├── common
│ └── formattr
│ ├── node_modules
│ ├── package.json
│ └── formattr.js
└── providers
├── aws
│ ├── node_modules
│ └── package.json
└── google
├── node_modules
└── package.json
The problem I am running into is that when somebody clones the app, they have to recurse into each package direction and manually run npm install. Additionally, there is lots of wasted resources and duplication, since the package aws might use npm install request but so does the google package. Right now, they both store independ versions.
Finally, there is this problem as well:
// Inside of the aws package, I need formattr. This makes me cry inside.
let format = require('../../common/formattr/formattr');
What is the recommended pattern and structure?
I'd still like to try to get an example running w/ Yeoman and Express.
I tried the following and it worked "okay", but I'm stuck merging the routes. (over simplified for readability)
mkdir test
cd test
express
mkdir app
cd app
mkdir js
cd js
yeoman angular
Then I changed "output:dist" to "output:../../public" in the Gruntfile.js
Now, both servers run okay on their own (e.g. yeoman server and node app.js). I can also run 'yeoman build' now to output the minified JS to /public in the express app.
I'm a bit fuzzy on how the routes might merge? I would like / to pull up the Angular route and not the express route, etc. The angular-express-seed examples on github look okay, but I would still like Yeoman integrated into the project.
Any suggestions would be appreciated.
I would recommend this structure for yeoman + expressjs:
mkdir app
cd app
yeoman angular
express .
So your dir tree should look like this:
.
├── app
│ ├── 404.html
│ ├── favicon.ico
│ ├── index.html
│ ├── robots.txt
│ ├── scripts
│ │ ├── controllers
│ │ │ └── main.js
│ │ ├── vendor
│ │ │ ├── angular.js
│ │ │ ├── angular.min.js
│ │ │ ├── es5-shim.min.js
│ │ │ └── json3.min.js
│ │ └── yeoman-test.js
│ ├── styles
│ │ └── main.css
│ └── views
│ └── main.html
├── app.js
├── Gruntfile.js
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── user.js
├── test
│ ├── lib
│ │ └── angular-mocks.js
│ └── spec
│ └── controllers
│ └── main.js
├── testacular.conf.js
└── views
├── index.jade
└── layout.jade
You can remove the now redundant public directory (we're going to serve from app instead):
rm -rf public
And now in app.js, you need to change which dir to serve static files from. Change this line:
app.use(express.static(path.join(__dirname, 'public')));
to this:
app.use(express.static(path.join(__dirname, 'app')));
And that should be about it. There's one careat in that you now have two "index" files -- one in views/index.jade, and the other in app/index.html. Removing the app/index.html currently breaks yeoman, so my advice is to get rid of the route for app/index.jade and just make edits to index.html.
Hope this helps!
Here is another slightly different setup
yo angular
update Gruntfile.js to change config from 'app' to 'public'.
then do
express .
open app.js and ensure there is no route mapping like this app.get('/', routes.index);
This is so node server would actually serve up index.html, the same file that loads up when running "grunt server".
Now go ahead and delete public directory and then move app directory to public
rm -rf public
mv app public
This project seems to cover all of the requirements (and even has optional support for MongoDB): https://github.com/DaftMonk/generator-angular-fullstack
I've just tried it locally and it works:
npm install -g generator-angular-fullstack
yo angular-fullstack [appname]
See the GitHub page for more info.
I would comment on #btford 's answer if I had the reputation -
Just wanted to add that installing express . after yo angular will overwrite the grunt-created package.json file which will break grunt as #jjperezaguinaga reported.
Make sure to save a copy of package.json before installing express .. Then add the following dependencies to the original package.json:
"dependencies" : {
"express": "3.3.4",
"jade": "*"
}
I'm having troubles with this solution:
express still try to load index.jade instead of index.html, but if I enter localhost:3000/index.html express render correctly.
I solved removing this line from app.js:
//app.get('/', routes.index);
Hope this helps. Thanks for sharing,
D.
Here's a compilation of steps others have suggested previously, but all in one, in numbered steps. This is based on versions: Yeoman 1.0.4 & Express 3.3.8.
1) Create your project directory and cd into it
2) Install angular:
yo angular
(will need to run the next two lines if you're not logged in as su)
bower install
sudo npm install
3) Rename package.json to package_yo.json
(so it's not overwritten by express' version of package.json)
4) Install Express
express -c less -Hs .
(or whatever other express options you desire)
sudo npm install
5) Delete Express' public directory & change 'public' to 'app' for paths in Express' app.js:
app.use(require('less-middleware')({ src: _dirname + '/app' }));
app.use(express.static(path.join(_dirname, 'app')));
6) Delete express' default route ( app.get('/', routes.index); )
(now express will use the routes specified in angular's /app folder instead
7) Start the server
npm start
(Then you should see Yeoman's welcome page at: localhost:3000/)