Npm Install Strapi to existing NextJS project - npm

I'm new to React, NextJS, and Npm, I recently created a Next app using this command:
npx create-next-app#latest
And now I want to add Strapi to the same project. I used this command to install Strapi:
npx create-strapi-app#latest my-project --quickstart
Using this command, it will create a new project, for Strapi.
I see that the Next and the Strapi projects share a lot of files, such as the files in the node_modules folder. Is there a way to have those in the same project? or would that make a mess?

I came to the conclusion that having those two apps on two different directories, with each having their own config files, and other modules, is the right way. We will end up with a lot of files and folders that exist in both apps, but it is simply best that we isolate these two apps from each other completely, because:
They have different config files, in most of the folders.
they are two different apps, Stapi being the backend api and the admin dashboard, and the Nextjs app being the rest of the website.
If those two apps were combined, we would end up with a directory-structure that would be very hard to work with.
In a larger project we might have more api or apps that run independently, and it's best to have those on different directories and ports. And having some duplicate files across all the apps, wouldn't affect performance, and wouldn't take much storage.

Related

Best way to send source maps to Sentry but keep them off production website and app

I have a Ionic Vue web-based PWA and web-based mobile app. Recently I added Sentry into the mix and used the Sentry webpack plugin to upload source maps to Sentry. Everything works great when the Vue/JavaScript crashes I get the proper line/column info on the error but I noticed on the web-based version of the app that webpack shows the source code for the entire Vue app. I'd like to prevent that.
Here is my workflow: I commit to github main and it kicks off a github action which builds the project and finally deploys to Firebase hosting. I'm thinking I need to have two actions, one for building and sending to Firebase, and another for building and uploading source maps. I also use Ionic AppFlow for deploying to mobile apps (iOS/Android) so I'm thinking I need to prevent AppFlow from building/sending sourcemaps too.
So... how do I do this? Both Github actions and AppFlow see things as "production" mode. And AppFlow doesn't support environment variables at the pay level I'm at. Is there a way to have multiple vue.config.js files I can have?

Nuxt & Capacitor - Unable to add android support

I have a Nuxt 2 app. I'm following the docs to add Capacitor and Android Support.
Everything is fine up to the point of running npx cap add android. The android folder is generated however there are errors in the terminal
√ Adding native android project in android in 342.51ms
√ Syncing Gradle in 944.40μp
√ add in 345.44ms
× copy android - failed!
[error] The web assets directory (.\.nuxt) must contain an index.html file.
It will be the entry point for the web portion of the Capacitor app.
√ Updating Android plugins in 33.68ms
× update android - failed!
[error] Error: ENOENT: no such file or directory, open
'<sourceroot>\android\app\src\main\assets\capacitor.plugins.json'
I’m not running Nuxt in static mode (due to routes and content pulled in dynamically from a CMS). So I run nuxt build which generates the output into a folder named .nuxt by default.
However nuxt build doesn’t create an index.html as an entry point, the nuxt build actually states Entrypoint app = server.js server.js.map. Hence the error above where it can’t find index.html in the .nuxt directory.
Does anyone know a way to resolve this? Or have implemented Capacitor with a Nuxt SPA?
I’ve found resources when using nuxt generate for a static app but not nuxt build for a spa like in my case.
I have a Nuxt2 web app with servers (app server and separate API server), also deployed as an Android app on the Play Store (in alpha testing). Both app flavours look and behave identical and use the same API server, as I desire.
IMHO, in the lifetime of your (universal) app, BOTH build and generate will get leveraged:
build, likely by whatever web app host you use (ie AWS, Heroku, etc), during deployment of the web app.
generate by yourself, when you're ready to submit to the app stores (Apple, Google, etc), making use of Capacitor.
Let's say you have a new feature to add to the app. On that day, you make git commits and increment your version number and when you're ready to deploy the update...
For the web app...
Make commit(s) and version number change
Deploy to your app host, which for most people, will also run the build step for you
The only time I ever run build locally is when I need to make final tests, troubleshoot bugs or make optimizations (e.g. lower final package size).
For the Android or iOS apps...
Make commit(s) and version number change
nuxt generate
Run Capacitor sync (however which way you do it (for me I use: npx cap sync)
Prepare the app store build & submit (however which way you do it)
What nuxt generate does for you, and what Capacitor needs, is a fully rendered snapshot of all your app views together, all at once. It's the equivalent of a web app user opening all your app's views all at once (e.g. 50 browser tabs), pulling all components/styles/etc into their local browser. This fully rendered app state ultimately gets bundled and is what will get submitted to the app store(s).
In Nuxt docs and terminal output, they seem to strongly suggest that if you're using nuxt generate, that you want to be using target: static, however I will say you should completely ignore this advice. Static is what you'd consider if you had a "brochureware" website or some recipe book app that you update once-in-awhile. It goes as far as in the terminal output of nuxt generate, even if I have target: server defined, you'll still see a line saying something along the lines of "Outputting for target static...". Just ignore it.
There is hardly anything static about a typical universal web app.
I personally use target: server with nuxt generate and I haven't seen any problems in the app (web or Android version).

What's the proper way to publish an electron app into Nexus

I have an electron app that needs to run on multiple architectures.
I use electron-packager to make a distribution folder.
I originally tried to npm publish this folder to a nexus repo.
npm publish strips the node_modules out of the built app which would make it break. As far as I can tell, there is no way to stop it from doing so.
Does anyone know the path I should be taking?
I am new to electron AND nexus so take my analysis with a grain of salt

Vue.js app deployment

I have Vue app, created with vue-cli. This is semi-developed application. I want show to customer what we have now. So, I want to deploy what we have.
If I run script npm run build can I continue project development after building? What best practices for deploying not finished app?
P. S. I'm new in vue. I know, that my question can be stupid. Anyway, do not place minuses, please.
You need to buy a vps hosting and install node.js. That's all, you can deploy your app. Also you can make a simple back-end on node+express and put there your 'dist' folder after npm run build and this will be your demo app.
Yes. npm run build will build and package your app into the dist folder. Everything under your src folder will remain as it is. You can continue working on your app normally and build it as often as you want. There aren't really best practices for this. I would just make sure it doesn't touch production data until it's actually ready.

Automating npm and webpack with Phonegap build

I'm building a PhoneGap app with PhoneGap build. I'd like to sync the app with my Git repository at BitBucket. The problem is that I ignore the files that are in my node_modules folder and the dist files that are generated by WebPack. So I want to automatically run an npm install and webpack before PhoneGap builds the app.
I have looked into hooks, and they seem like exactly what I need. However, I can't seem to get them to work. For example, I made a folder hooks/before_build and placed a test script in there that just echos back the word "test". But I don't see the output of that anywhere in the build log. I also added it specifically to my config.xml without any output.
It seems unusual that I haven't been able to find anywhere that explains this, but I can't seem to find anywhere.
Could anyone share how they have their build system set up, or provide relevant links?