I want to use the same code-base for my Website and native mobile apps. I am building the native apps using ionic cordova build <platform> and deploying the website with ionic serve --external --prod inside a docker. I need toh convert the bottom-tab navigation bar on my app to a sidebar on my website. This will require change in routing and HTML files. But all the other files which we are displaying remain the same. So, How do i deploy different files for my website and different ones for my native app on every version?
Ionic Platform service
You could use the Ionic Platform
service to
determine the platform of the user's current device, then based on
different platforms, display your desired template using *ngIf
directive
TS file
import { Platform } from '#ionic/angular';
#Component({...})
export class MyPage {
is_native: boolean;
is_pwa: boolean;
constructor(public platform: Platform) {
this.is_native = this.platform.is('hybrid');
this.is_pwa = this.platform.is('pwa');
}
}
HTML template
<div #sideMenu *ngIf="is_pwa">...
</div>
<div #navBar *ngIf="is_native">...
</div>
Updated: Shell script
Another way is to replace your template files with different ones using shell scripts.
cp src/app/componenets/template.pwa.html src/app/componenets/template.html
ionic serve --external --prod
Related
I have a Reactjs typescript project I want to transfer to native mobile platforms using Capacitor. I've successfully created the native projects for each, however there's an issue with the Google login feature I have in it.
The Google login API requires you to add a script tag to the index.html in the public folder for the React app which injects a variable used to do the logging in. This is the script tag in the index.html file:
<script src="https://accounts.google.com/gsi/client"></script>
I have a declare var google: any in a file where I do the logging in. This works fine in web but when I use Capacitor and open the Android version, it fails claiming that the google variable is not defined.
Why does this happen and how do I fix it?
I have two separate apps. One is a react app that is deployed at www.example.com, the other is a completely separate blog app built with Gatsby.
I would like users to be able to visit www.example.com/blog and see the blog app without using a redirect that would change the URL.
Both apps are hosted as separate firebase projects, is this achievable?
There's a feature called pathPrefix which purpose is what you are looking for.
You just need to set it in the main Gatsby configuration file (gatsby-config.js):
module.exports = {
pathPrefix: `/blog`,
}
Following the previous example, a link to /test-1 will be rewritten as /blog/test-1 automatically.
Another important consideration is to understand that all your building commands (build and serve) will need to be respectively flagged as:
gatsby build --prefix-paths
gatsby serve --prefix-paths
During development paths don't need to be prefixed.
In-app linking is handled automatically by Gatsby's Link component.
For pathnames you construct manually, there’s a helper function, withPrefix that prepends your path prefix in production.
Additional resources:
https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/asset-prefix/
https://www.gatsbyjs.com/docs/deploying-to-gitlab-pages/#add-path-prefix-to-gatsby
I was hoping to deploy a Next.js app with Laravel API. I had developed React apps with CRA and in those I used the API server to serve the index.html of the CRA as the entry point of the app.
But in Next.js, after development I get to know that it needs a Node.js server to serve (which is my bad, didn't notice that). There is an option next export that builds a static representation of the Next.js app and it has an index.html. I am serving the index.html as the entry of the app by my Laravel API. It is serving the page, but just some of the static contents.
What I was hoping to know is it possible to host the aPI and the Next app from a single PHP shared hosting without any node server? If so, how? If not so, what could be the alternatives?
Actually the acepted answer is completly wrong, when you do yarn build and in your package.json is set like "build": "next build && next export", you will get an out folder which all the items in there are used to build without node.js server
Now since you are using laravel, and you use the out folder you will only load half of the page because the routes are not set properly. for that to work you need to edit your next.config.js edit it to
module.exports = {
distDir: '/resources/views',
assetPrefix: '/resources/views',
}
These will set the root directory to the root one in Laravel. now this will work for SPA (single page application) only for the dynamic routes you need to match with a view file for each one that you have in your out folder
For each route that you have you need to create a new "get" route in laravel
Route::get('/', function () {
return require resource_path('views/index.html');
});
Route::get('/contacts', function () {
return require resource_path('views/contacts.html');
});
Route::get('/post/{slug}', function () {
return require resource_path('views/post/[slug].html');
});
Notice that you can pass a wildcard for dynamic routes and they are all gonna work. once you do that and you deploy route out folder inside /resources/views in Laravel it's going to work
Apparently there is no alternative to nodejs server, which is not an option for me currently, so I unfortunately had to abandon next.js and create a CRA app and used as much from the next.js as I could.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
I have a react app created with create-react-app. I would like to add an image not part of the react app to the offline manifest. The image is just referenced from index.html. I don't understand how I can include this in the offline manifest.
The react app is ejected.
Put the image in the public folder just as in a regular website and refer to that image. Everything in the src folder is put in a big js file after building so you cant use that